围绕鼠标旋转多个对象

Question

我正在尝试让多个 div 围绕鼠标旋转。

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

有没有办法对使用相同 class 的所有对象使用相同的代码？

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

http://codepen.io/thalesribeiro/pen/egVgpp

干杯，泰雷兹

Answer 1

您需要在 document 而不是单个 div 元素上设置 mousemove 事件处理程序，以便在页面上的任何位置移动都会触发 div 跟随鼠标.

此外，要让每个 div 以自己的半径跟踪鼠标，需要循环所有 div 元素，以便可以对每个元素进行单独计算。

由于循环，设置了一个闭包，为了避免闭包带来的范围共享，变量声明从 var 更改为 let。

查看代码以获得对此的评论。

$(function(){
  
  var player = $('window');
  
  // Give the document a mousemove event handler
  $(document).on('mousemove', function (e) {
    
    // If we are hovering over one of the div elements, exit the function
    if(e.target.nodeName === "DIV"){ return; }
        
    // Loop through each div and set its rotation separately from each other one  
    $(".drop").each(function(){
      
      // Declare all variables using "let" instead of "var" to avoid closure side-effects
      // of scope sharing
      
      //  Current position
      let p1 = {
            x: $(this).offset().left,
            y: $(this).offset().top
      };
      
      // Future position
      let p2 = {
            x: e.offsetX,
            y: e.offsetY
      };

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

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

      // Just move the div that we're looping over at the moment
      $(this).css('-webkit-transform', 'rotate(' + angleDeg + 'deg)');
        
    });
  });
});

body{ background:#ccc; }

.container { width:75%; margin:10% auto 0 auto; }

.drop{
  background:red;
  width:10px;
  height:50px;
  margin:35px;
  float:left;
}

.other { 
  background:blue;
  width:10px;
  height:50px;
  margin:25px;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    
    <div class="other"></div>
    <div class="other"></div>
    
    
 </div>
</body>

Answer 2

我之前小规模修复过这个问题，但是当我把它添加到我的实际项目代码中时，它发生了冲突。我创建了它的另一个版本，但我再次努力使代码更智能并且它在浏览器中变得有点慢，所以我想知道是否有办法让它更轻。

  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

围绕鼠标旋转多个对象

Rotate multiple objects around mouse

javascript

arrays

mouse

jquery

rotation