Элемент уходящий от мышки

228

02 апреля 2017, 03:46

Есть такой код: https://codepen.io /anon/pen/xqmZPE Помогите сделать так что-бы этот элемент возвращался к первоначальному положению после того как элемент достигнет 0-го значения left. Или может есть какие-то похожие примеры элементов убегающих от местоположения мышки. Заранее спасибо.

В идеале должно получиться вот что: http://infostart.ru/public/339805/

Answer 1

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

Например:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.touchMeNot{
    position:absolute;
    left:0;
    top:0;
}
</style>
</head>
<body>
  <button class="touchMeNot">Нажми меня (3 попытки)</button>
  <script>
  var myFuncCalls = 0;
  $('.touchMeNot').on('mouseenter',function(e){
      var maxX = $(window).width() - $(this).width();
      var maxY = $(window).height() - $(this).height();
      $(this).css({
          'left':getRandomInt(0, maxX),
          'top':getRandomInt(0, maxY)
      });
       if (myFuncCalls > 2) {
      alert( "I have been called " + myFuncCalls + " times" );
          $(this).css({
          'left':0,
          'top':0
      });
  }
  myFuncCalls++;
  });
  function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  </script>
</body>
</html>

Когда функция touchMeNotвызовется в 4-ый раз, сработает условие и значения CSS вернутся к исходным.

http://jsfiddle.net/7ytoogeq/