旋转鼠标轻松

Question

下面我建我跟着鼠标移动的方式一menupage我在中间旋转图像是这样的：

http://jsfiddle.net/JqBZb/

$(document).mousemove(function(event) { 

    var mouseX = event.pageX; 
    var mouseY = event.pageY; 
    var offsetX = $(window).width()/2; 
    var offsetY = $(window).height()/2; 
    var radian = Math.atan2(mouseX - offsetX, mouseY - offsetY); 
    var deg = (radian * (180/Math.PI) * -1) + 180; 

$('#compassIn').css({ 
     '-webkit-transform': 'translateY(-50%) translateX(-50%) rotateZ(' + deg + 'deg)', 
     '-moz-transform': 'translateY(-50%) translateX(-50%) rotateZ(' + deg + 'deg)', 
     '-ms-transform': 'translateY(-50%) translateX(-50%) rotateZ(' + deg + 'deg)', 
     '-o-transform': 'translateY(-50%) translateX(-50%) rotateZ(' + deg + 'deg)', 
     'transform': 'translateY(-50%) translateX(-50%) rotateZ(' + deg + 'deg)', 
    }); 
}); 

的问题是我怎么能增加延迟并容易使旋转平滑。

谢谢！

Answer 1

一个简单的CSS过渡可以在这里创造奇迹。请参阅使用例如：

img {transition: transform 0.2s ease-in-out} 

http://jsfiddle.net/JqBZb/622/

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

#apDiv1 { 
 
    position:absolute; 
 
    width:400px; 
 
    height:327px; 
 
    z-index:1; 
 
    left: 105px; 
 
    top: 98px; 
 
} 
 
img {transition: all 0.2s ease-in-out; width: 50px; height: auto}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="apDiv1"><img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Finger-pointing-icon.png" class="image"/> <br> 
 
    (Not actual picture I'm trying to rotate, but it'll do for now) 
 
</div>

当然，你可以调整的时机，缓和，等你绝对应该从359度手柄旋转0，反之亦然。