图像使用Jquery和CSS旋转到鼠标

Question

我有一个指南针图像,我正试图让针在页面上跟随鼠标,确切地说如何在下面的演示中旋转图像,但无需移动和点击.但是我在分解代码时遇到了麻烦,所以任何帮助都会受到最高的赞赏.提前致谢.

http://www.elated.com/res/File/articles/development/javascript/jquery/smooth-rotatable-images-css3-jquery/

图像简单地包裹在div中

<div id="content">
<img id="compass" src="compass.png"/>
<img id="needle" src="needle.png"/>
</div>

Answer 1

试试这个:https://jsfiddle.net/x2d8pmub/

var img = $('.image');
if(img.length > 0){
    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('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
}