jquery - 根据与鼠标的距离动态旋转图像

Question

我有一张图片，想旋转它。但是，我认为 css 关键帧不会起作用，因为它们不能动态更改。我目前正在使用一个名为 jquery rotate 的 jquery 插件 http://jqueryrotate.googlecode.com .我想要做的是根据元素到鼠标的距离改变旋转速度。是否有任何 CPU 密集度不太高(希望如此)的解决方案，因为 jquery rotate 已经相当浪费 CPU 能力了。这是我的代码:

    var angle = 0;
    var distance = 200;
    setInterval(function () {
        plus = distance / 100;
        angle -= plus;
        $("#elem").rotate(angle);
     }, 25);

查看 this jsFiddle 每次循环将图像旋转 2 度。我想做的是在鼠标靠近时加快旋转速度(通过更改“距离”变量)。

Answer 1

编辑:在此处更新 fiddle :

http://jsfiddle.net/eCV8q/25/

---

使用 body.pageX & Y 在正文中找到 mouseX & Y，然后使用 element.offset() 找到图像的偏移量。

$(document).ready(function() {
  $('body').mousemove(function(e) {
    // had to put the image in a container div as it was rotating
    var offset = $('#container').offset(); 
    var distanceX = e.pageX - (offset.left + ($('#elem').width()/2));    
    var distanceY = e.pageY - (offset.top + ($('#elem').height()/2)); 
}