Javascript 围绕鼠标旋转多个对象

我试图使多个div围绕鼠标旋转

我遇到的问题是，所有的对象都跟随第一个对象的旋转。我不知道如何让它们独立旋转

有没有办法对使用同一类的所有对象使用相同的代码

$(document).ready(function(){
      var player = $('.drop');
      //Checks to see which key is pressed down

      $(window).on('mousemove', function (e) {

        //Current position
        var p1 = {
          x: player.offset().left,
          y: player.offset().top
        };

        //Future position
        var p2 = {
          x: e.offsetX,
          y: e.offsetY
        };

        //Angle between them in degrees
        var angleDeg = (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI) - 90;

        if(angleDeg >= 360){
          angleDeg -= 360;
        }

          //Animate the whole thing
          player.css('-webkit-transform', 'rotate(' + angleDeg + 'deg)');
      });
  });

干杯，

---

泰雷兹

您需要在

文档

上设置

mousemove

事件处理程序，而不是单个

div

元素，以便页面上的任何位置移动都会触发div跟随鼠标

此外，要使每个

div

以自己的半径跟踪鼠标，需要循环所有

div

元素，以便对每个元素进行单独计算

由于循环，设置了闭包，为了避免闭包带来的范围共享，变量声明从

var

更改为

let

请参阅代码以获取对此的注释

$（函数（）{
变量player=$（'window'）；
//为文档指定mousemove事件处理程序
$（文档）.on（'mousemove'，函数（e）{
//如果将鼠标悬停在某个div元素上，请退出该函数
if（e.target.nodeName==“DIV”）{return；}
//循环遍历每个div，并分别设置其旋转
$（“.drop”）.each（函数（）{
//使用“let”而不是“var”声明所有变量，以避免闭包副作用
//范围共享的概念
//当前位置
设p1={
x:$（this）.offset（）左，
y:$（this）.offset（）.top
};
//未来地位
设p2={
x:e.offsetX，
y:e.offsetY
};
//它们之间的角度（度）
设angleDeg=（数学atan2（p2.y-p1.y，p2.x-p1.x）*180/数学PI）-90；
如果（角度>=360）{
角度度-=360；
}
//只需移动我们目前正在循环的div
$（this.css（'-webkit transform'，'rotate（'+angleDeg+'deg'）；
});
});
});
body{背景：#ccc；}
.container{宽度：75%；边距：10%自动0自动；}
.放下{
背景：红色；
宽度：10px；
高度：50px；
利润率：35px；
浮动：左；
}
.其他{
背景：蓝色；
宽度：10px；
高度：50px；
利润率：25px；
浮动：左；
}
我以前曾小规模地解决过这个问题，但当我将它添加到实际的项目代码中时，它发生了冲突。我创建了它的另一个版本，但我再次努力使代码更智能，而且浏览器中的速度有点慢，所以我想知道是否有办法使它更轻

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

嘿！谢谢你的帮助。这还不是我想要做的。我希望所有的箭头都能随着鼠标的移动而独立旋转。目前，它正在做一种奇怪的行为，它只有在我悬停每个箭头时才会移动。我想我可能必须对数组和每个箭头做些什么。但我不完全确定。@ThalesRibeiro现在看一看。有两个问题。1） 您需要为
文档
而不是
div
元素设置
mousemove
事件处理程序，这样当您在文档中的任何位置移动时，
div
元素将相对于文档上的鼠标移动；2）您需要计算每个div的旋转位置，所以在它们之间循环是必要的。这太棒了，斯科特！它正在工作。只有一个问题。当我在构图中添加其他元素时，我在旋转上遇到了一个小问题。这正常吗？如果您将鼠标悬停在蓝色对象上，您将看到该问题。@ThalesRibeiro I添加了一行代码，通过检查鼠标悬停的元素是否为
div
来修复该问题。如果是，请退出该函数。请投票表决我的答案，并标记为“答案”，如果这是做什么，你问。谢谢