独立して要素を移動するjs

Question

カーソルをポイントするために別の矢印をアニメートしようとしていますが、そのための軽量ソリューションは見つかりません。

私は以下のコードを使用していますが、ウェブサイトに少し重いようです。コードを最適化する方法はありますか？

乾杯！ T

// the same as yours. 
    function rotateOnMouse(e, pw) { 
     var offset = pw.offset(); 
     var center_x = (offset.left) + ($(pw).width()/2); 
     var center_y = (offset.top) + ($(pw).height()/2); 
     var mouse_x = e.pageX; 
     var mouse_y = e.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1); 
     $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
    } 

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

    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('#arrowD1')); 
    }); 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('#arrowD2')); 
    }); 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('#arrowD3')); 
    }); 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('#arrowD4')); 
    }); 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('#arrowD5')); 
    }); 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('#arrowD6')); 
    }); 


    }); 

http://codepen.io/thalesribeiro/pen/egVgpp

Answer 1

私はパフォーマンスで助けることができるいくつかのアイデアがあります：

• 使用requestAnimationFrameのをので、変数に変換
• ストア矢印ノードを変更する際にブラウザは、マウスの移動ごとにそれらを照会する必要はありません、これはあなたに大きなパフォーマンスの向上を与える
• あなたは同じことが一つだけ
• バインドで達成することができる複数のイベントリスナーを追加（）（上の使用が推奨されていません）

var arrow1 = $('#arrowD1'); 
 
var arrow2 = $('#arrowD2'); 
 
$(document).on('mousemove', function(e){ 
 
    rotateOnMouse(e, arrow1); 
 
    rotateOnMouse(e, arrow2); 
 
);

すると、コードをテストしていないが、それはあなたを与える必要がありますどのように見えるべきかという考え。

編集：私の提案を

Codepen：codepen