Поворот нескольких объектов вокруг мыши

Я пытаюсь заставить несколько divs вращаться вокруг мыши.Поворот нескольких объектов вокруг мыши

Проблема, с которой я сталкиваюсь, заключается в том, что все объекты следуют за вращением первого. Я понятия не имею, как я могу заставить их вращаться независимо.

Есть ли способ использовать один и тот же код для всех объектов с использованием одного и того же класса?

$(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

Приветствия, Thales

источник

2017-01-31 Thales Ribeiro

Вы нужно настроить обработчик с mousemove событий на document, а не отдельные 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>

источник

2017-01-31 22:22:32

Эй! Спасибо за помощь. Это еще не все, что я пытаюсь сделать. Я хочу, чтобы все стрелки вращаются независимо друг от друга, следуя мыши. В настоящий момент это странное поведение, которое движется только тогда, когда я навешиваю каждую стрелку. –

А, ок. Дайте мне несколько минут, чтобы поработать над этим. –

Я думаю, мне, возможно, придется что-то делать с массивом и .each, но я не совсем уверен. –

я уже исправил эту проблему в небольшом масштабе, но когда я добавил это мой реальный код проекта, это противоречие. Я создал другую версию, но я снова пытаюсь сделать код более умным, и в браузере он немного медленнее, поэтому мне интересно, есть ли способ сделать его более легким.

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

источник

2017-02-01 08:45:48

Поворот нескольких объектов вокруг мыши

ответ

Смежные вопросы