Question

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

Answer 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事件。

我根据您的代码做了一个简单的小提琴，查看：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);
});

Answer 2

更改此行：

mainDiv.click(function (e) {

到

mainDiv.hover(function (e) {

hover接受两个功能：第一个在mouseenter执行，第二个在mouseleave执行。

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

2 个答案: