Javascript 独立地移动元素

我正在尝试设置指向光标的不同箭头的动画，但是我找不到一个轻量级的解决方案

我正在使用下面的代码，但它似乎有点沉重的网站。有没有办法优化代码

干杯！ T

---

我有一些想法可以帮助提高性能：

• 更改变换时使用requestAnimationFrame
• 将箭头节点存储在变量中，这样浏览器就不必在每次鼠标移动时查询它们，这将大大提高性能
• 您正在添加多个事件侦听器，仅使用一个事件侦听器也可以实现这一点
• bind（）不推荐在（）上使用

var arrow1=$（'#arrowD1'）；
变量arrow2=$（“#arrowD2”）；
$（文档）.on（'mousemove'，函数（e）{
旋转鼠标（e，箭头1）；
旋转鼠标（e，箭头2）；
)

hmm，它对我不起作用。你能给我演示一下它如何应用于其余代码吗？我用我的建议编辑了你的代码笔，添加了答案链接。另外，如果你想进一步提高性能，我建议使用jquery不支持的被动事件侦听器。如果我想调用所有元素都具有相同的类？例如。arrows，然后我就不必为每个箭头调用相同的函数了？如果这样做的话，你仍然需要迭代每个箭头来单独计算旋转，你有没有一个例子说明我将如何做？

// 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'));
    });


  });