Rotate函数不更新位置

Question

我有一个稍微简单的脚本，我正在尝试让一个图像将旋转，指向您的光标，然后移动图像跟随鼠标一旦光标停止。我遇到的问题是，我从另一个解决方案中借用的旋转函数不会更新图像的位置。一旦图像在屏幕上移动，它仍然会在计算旋转时将图像的原始位置与鼠标位置进行比较。

下面是我的rotate函数：

    function rotate(){
   var offset = img.offset();

   function mouse(evt) {
        var center_x = (offset.left);//(img.width() / 2);
        var center_y = (offset.top);//(img.height() / 2);
        var mouse_x = evt.pageX;
        var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + -90;
        img.css('-moz-transform', 'rotate(' + degree + 'deg)');
        img.css('-moz-transform-origin', '0% 11%');
        img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        img.css('-webkit-transform-origin', '0% 13%');
        img.css('-o-transform', 'rotate(' + degree + 'deg)');
        img.css('-o-transform-origin', '0% 11%');
        img.css('-ms-transform', 'rotate(' + degree + 'deg)');
   }
    $(document).mousemove(mouse);
}

我在jsfiddle上也有整个项目：http://jsfiddle.net/joshbox/t8kfyxec/3/

Answer 1

问题是，您是根据图像在页面加载时的位置来计算图像的角度，而不是基于当前位置(移动后可能会有所不同)。

通过每次计算旋转角度时获取实际位置，可以很容易地解决这个问题。您所需要做的就是在mouse()函数中移动var offset = img.offset();，它应该可以很好地工作。

当你在它的时候，我注意到你正在设置你的图像的变换原点和角度，而原点实际上保持不变。我建议你把它移到你的css中去。

我继续更新了我的建议，同时更新了一些次要的可读性更新：http://jsfiddle.net/t8kfyxec/6/

关于我所做的更改，有几点要注意：

• It应该是clearTimeout，而不是包括w3c标准版本(作为最后一个选项)，而不仅仅是带有浏览器前缀的版本。
• 我删除了内部的move函数，因为我看不出有什么好的理由这样做。
• 所有事件现在都绑定在单个事件处理程序中，被触发的函数只接收它们所需的数据，而不是整个事件(这使得测试、调试和重用代码变得更容易)

我希望这一切都有意义。如果需要我进一步解释，请随时询问。