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);
}

Answer 2

我只是将您链接到this good writeup，而不是输入关于如何进行CSS旋转的长答案。

至于计算旋转的角度，你需要知道指南针中心的位置和鼠标的位置。在文档上绑定mousemove事件，以便在鼠标移动时更新指南针。

找出x和y的差异：

dx = mouse.x - compass.x;
dy = mouse.y - compass.y;

假设旋转顺时针旋转，0°垂直（这将反转Math.atan2参数），tan(Θ) = dx / dy。

Θ = arctan( dx / dy );

或JS

angle = Math.atan2( dx, dy );

如果我搞砸了dx＆amp;的减法顺序，请告诉我。 dy。

Answer 3

你可以使用css3的功能来旋转div

img {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

你可以使用jQuery UI的“draggable（）”方法来移动它：）

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

3 个答案: