Question

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

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

干杯！ Ť

// 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（）已弃用（）

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

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

修改

Codepen与我的建议：codepen

独立移动元素js

1 个答案: