将鼠标旋转限制为特定的度数

Limit mouse rotation to specific degrees

本文关键字：鼠标 旋转      更新时间：2023-09-26

我有一个div，我根据鼠标位置旋转，这是小提琴：

http://jsfiddle.net/JqBZb/550/

以及JS:

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('-webkit-transform-origin', '15px 50%');
        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);
}

首先，我说代码取自另一个帖子。问题是我想限制DIV的旋转75度。

我想让DIV不能指向自己背后。提前感谢！

只需在设置css之前添加以下内容：

if( Math.abs(degree) >= 75) { return; }

http://jsfiddle.net/JqBZb/551/

相关文章：