根据鼠标距离动态旋转图像

Question

我有一张图片，想要旋转它。然而，我认为 CSS keyframes 不适用，因为它们无法动态更改。目前我正在使用一个叫做 jQuery rotate 的插件，在 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);

请查看此 jsFiddle，该Fiddle每次循环将图像旋转2度。我的想法是随着鼠标靠近（通过改变“distance”变量），加快旋转速度。

- Stewy Slocum

Answer 1

编辑：更新了这里的代码：

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

---

使用body.pageX和Y在body中找到鼠标的X和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)); 
}

- Mupps

---

是的，那很好，但我如何使用它来改变旋转速度？由于某种原因，这个链接（http://jsfiddle.net/eCV8q/24/）不起作用。 - Stewy Slocum

间隔函数需要在mousemove函数之外，否则它会一直调用间隔函数。我已经将其移动到外部并更新了fiddle：http://jsfiddle.net/eCV8q/25/ - Mupps

太棒了，这个完美运行，即使在一台只有256MB内存和1GHz处理器的老款emac上也是如此！ - Stewy Slocum

这段代码有没有办法修改成相反的效果？也就是越接近图像旋转得越快？谢谢。 - owenmelbz

Answer 2

我建议您查看https://github.com/jQueryKeyframes/jQuery.Keyframes，因为它可以动态生成和应用CSS关键帧到元素上。

我曾经使用过它来实现类似于您描述的目的，即让一对眼睛的瞳孔跟随鼠标在页面上移动。非常棒 :)

- Jake Cattrall