3

画像があり、回転させたい。ただし、cssキーフレームは動的に変更できないため、機能しないと思います。私は現在、http：//jqueryrotate.googlecode.comでjqueryrotateというjqueryプラグインを使用しています。私がやりたいのは、要素からマウスまでの距離だけ回転速度を変えることです。jqueryrotateはすでにCPUパワーをかなり浪費しているので、（うまくいけば）CPUをあまり集中させないソリューションはありますか？これが私のコードです：

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

各ループで画像を2度回転させるこのjsFiddleを確認してください。私がやりたいのは、マウスが近づくにつれて回転を高速化することです（「距離」変数を変更することによって）。

4

2 に答える 2

3

編集：ここでフィドルを更新しました：

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)); 
}
于 2013-03-27T00:14:19.027 に答える
0

https://github.com/jQueryKeyframes/jQuery.Keyframesを参照することをお勧めします。これは、cssキーフレームを動的に生成し、その場で要素に適用できるためです。

私は、あなたが説明したのと同じ目的でそれを使用しました。そこでは、一対の目の瞳孔がページの周りでマウスを追いかけました。素晴らしい ：）

于 2014-03-17T09:41:35.027 に答える