0

当我在这样的 div 中单击时，我的图像会改变位置：

mainDiv.click(function (e) {

    var mouseX = e.clientX,
        mouseY = e.clientY;

        test2 = Math.atan(mouseY/mouseX);
        test3 = ((test2 * 180) / 3.14);

        $("#hgun").rotate(test3);  
});

但它只会在我在 div 内单击时改变位置。当我将鼠标悬停在 div 内时，如何让它改变位置？

4

2 回答 2

2

.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序。您可以使用它在鼠标位于元素内时简单地将行为应用于元素。

它是这样调用的：

$(selector).hover(handlerIn, handlerOut)

简称：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

在你的情况下，这将是：

    mainDiv.hover(function (e) {
        var mouseX = e.clientX,
            mouseY = e.clientY;

        test2 = Math.atan(mouseY / mouseX);
        test3 = ((test2 * 180) / 3.14);
        $("#hgun").rotate(test3);
    },
function (e) {
    //On mouseleave
});

进一步阅读： jQuery 悬停文档， jQuery 鼠标事件

更新，基于作者的评论：

我不确定您到底想实现什么，但如果您希望每次鼠标在容器内移动时都进行计算和相关操作，您可以使用mousemove事件。

我已经根据您的代码做了一个简单的 Fiddle，请查看：http : //jsfiddle.net/sQ4Z4/1/

我使用了我发现的第一个jQuery Rotate 插件，它可能不是你使用的那个，但它应该足以让你朝着正确的方向前进。

基本上你的代码应该是这样的：

mainDiv.mousemove(function (e) {
    var mouseX = e.clientX,
        mouseY = e.clientY;

    test2 = Math.atan(mouseY / mouseX);
    test3 = ((test2 * 180) / 3.14);
    $("#hgun").rotate(test3);
});
于 2013-04-11T07:06:31.217 回答
0

更改此行：

mainDiv.click(function (e) {

至

mainDiv.hover(function (e) {

hover接受两个函数：第一个在 上执行mouseenter，第二个在mouseleave.

于 2013-04-11T07:03:25.460 回答