Кнопка воспроизведения следует за курсором в div

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я нашел этот codepen https://codepen.io/plankton/pen/aGejYq работает хорошо, как и ожидалось.

У меня есть элемент, который следует за курсором. Но я не знаю, как ограничить его div, и когда курсор переходит в этот div, этот элемент плавно переходит к курсору. Если я уйду из div, просто элемент вернется на свое место. Точно так же, как в видео в этом веб- https://obys.agency /

Если это можно сделать только с помощью JavaScript, это нормально для меня.

 jQuery(document).ready(function() {

  var mouseX = 0,
    mouseY = 0;
  var xp = 0,
    yp = 0;

  $(document).mousemove(function(e) {
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30;
  });

  setInterval(function() {
    xp  = ((mouseX - xp) / 6);
    yp  = ((mouseY - yp) / 6);
    $("#circle").css({
      left: xp   'px',
      top: yp   'px'
    });
  }, 20);

});

 body,
html {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #000000;
}

.circle {
  position: absolute;
  border: solid 1px #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>

1. $(‘#YourDiv»).mousemove

2. @epascarello Спасибо! Я пытаюсь $('.hola').mouseleave(function(e){ mouseX = 30; mouseY = 30; }); , когда мышь уходит. Как я могу контролировать скорость элемента, переходящего в x30 y30, когда мышь уходит?

3. На самом деле я понимаю, спасибо за все @epascarello

4. Я не знаю почему, но переход в css при перемещении мыши не является плавным

Ответ №1:

Вот что я придумал.

 jQuery(document).ready(function() {
  
  const constraint = document.getElementById('constraint');
  const circle = document.getElementById('circle');

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
   
  $(document).mousemove(function(e){
     if (e.target === constraint || (e.target === circle amp;amp; e.pageX >= 0 amp;amp; e.pageX <= 300 amp;amp; e.pageY >= 0 amp;amp; e.pageY <= 300)) {
        mouseX = e.pageX - 30;
        mouseY = e.pageY - 30;
     } else {
        mouseX = 0;
        mouseY = 0;
     }
  });

  setInterval(function(){
     xp  = ((mouseX - xp)/6);
     yp  = ((mouseY - yp)/6);
     $("#circle").css({left: xp  'px', top: yp  'px'});
  }, 20);

});

 @import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
body, html {
    position: relative;
    height: 100%; 
    width : 100%;  
    margin: 0;
    background-color: #000000;
}

.circle {
    position: absolute;
    border: solid 1px #ccc;
    width: 60px; 
    height: 60px; 
    border-radius: 50%;  
}

.constraint {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="constraint" class="constraint">
  <span id="circle" class="circle"></span>
</div>

1. Это круто, но почему, если я иду так медленно, круг остается в курсоре за пределами div?

2. @Jose, это был незначительный сбой, я его исправил.

3. О, спасибо! Красиво! Могу ли я изменить 300 на 100% ограничение?

4. Конечно, вы можете это сделать