悬停对象时如何更新 X 和 Y 坐标答案

【问题标题】：How to update X and Y coordinate when hovering an object悬停对象时如何更新 X 和 Y 坐标
【发布时间】：2013-04-11 07:00:43
【问题描述】：

当我在这样的 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 内时，如何让它改变位置？

【问题讨论】：

看看JQuery mouse events。

标签： javascript jquery image hover

【解决方案1】：

.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 hover documentation、jQuery mouse events

更新，基于作者的评论：

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

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

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

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

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

    test2 = Math.atan(mouseY / mouseX);
    test3 = ((test2 * 180) / 3.14);
    $("#hgun").rotate(test3);
});

【讨论】：

我现在的问题是，只要我用鼠标进入盒子，它就会在那里旋转，但是当我在盒子里面时它不会旋转。 x 和 y 需要随时更新吗？
再次检查我的答案，我已经添加了一个演示和一些额外的信息和参考。

【解决方案2】：

改变这一行：

mainDiv.click(function (e) {

到

mainDiv.hover(function (e) {

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

【讨论】：