3

我有一张图片，想旋转它。但是，我认为 css 关键帧不会起作用，因为它们不能动态更改。我目前在http://jqueryrotate.googlecode.com使用一个名为 jquery rotate 的 jquery 插件。我想要做的是通过从元素到鼠标的距离来改变旋转速度。是否有任何不太占用 CPU 的解决方案（希望如此），因为 jquery rotate 已经非常浪费 CPU 功率。这是我的代码：

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

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

4

2 回答 2

3

编辑：在这里更新了小提琴：

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

使用 body.pageX 和 Y 在 body 中找到 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)); 
}
于 2013-03-27T00:14:19.027 回答
0

我建议您查看https://github.com/jQueryKeyframes/jQuery.Keyframes，因为它可以动态生成 css 关键帧并将其应用于元素。

我已经将它用于类似的目的，就像您描述的那样，一双眼睛的瞳孔跟随鼠标在页面周围移动。惊人的 ：）

于 2014-03-17T09:41:35.027 回答