独立移动元素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
• 将箭头节点存储在一个变量中，这样浏览器就不必在每次鼠标移动时都查询它们，这将大大提高性能
• 您正在添加多个事件侦听器，只需一个即可实现相同的效果
• bind() 已弃用 on()

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

没有测试代码，但它应该让你知道它应该是什么样子。

编辑：

Codepen 和我的建议：codepen