Elemente unabhängig bewegen js

Question

Ich versuche verschiedene Pfeile zu animieren, um auf den Cursor zu zeigen, aber ich kann keine leichte Lösung dafür finden.

Ich benutze den Code unten, aber es scheint ein bisschen schwer auf der Website. Gibt es eine Möglichkeit, den Code zu optimieren?

Prost! 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

ich ein paar Ideen, die mit der Leistung helfen könnte:

• Verwendung request, wenn die Transformationen
in einer Variablen
• speichern die Pfeil-Knoten zu ändern, so die Browser muss sie nicht jede Mausbewegung abfragen, dies wird Ihnen einen großen Leistungsschub geben
• Sie sind mehrere Ereignis-Listener hinzufügen, können das gleiche mit nur einem
• binden erreicht werden() ist veraltet Verwendung auf()

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

Haben Sie den Code nicht testen, aber es sollte Ihnen eine Idee wie es aussehen soll.

Edit:

Codepen mit meinen Vorschlägen: codepen