Здравствуйте. Смотрите у меня есть код, но нужно добавить кое какую функцию, которая поможет с моими проблемами

183

26 марта 2017, 05:16

У меня код работает нормально, при проверке узнаете что мне нужно, задача моя в том что я не могу сделать так что бы мышь не доходил до блока, нужно сделать так что бы например мышь дошел до блока где то 10px от блока и блок уже рондомно передвинулся по моему экрану по точнее вы узнаете когда посмотрите на код: https://drive.google.com/open?id=0B2PXXf0mSjCcc0owdTY1OC0zSUk. Извините что так загрузил просто у меня там 3 файла. Если что то не правильно сказал то скажите исправлю скажу как то по другому

Answer 1

Можно поместить убегающий блок внутрь внешнего, с padding=10px – в примере он обведён пунктирной линией, но вы его сделаете невидимым. При попадании мышки на этот блок, вся конструкция переезжает )

function jump() { 
  $(this) 
    .css('top',Math.floor(Math.random()*($(window).height()-50))) 
    .css('left',Math.floor(Math.random()*($(window).width()-120))) 
  ; 
} 
 
$('.outer').on('mouseover',jump);

.outer { 
  padding:10px; 
  border:1px dashed #CCC; 
  position:absolute; 
  width:120px; 
} 
.inner { 
  background:#CCC; 
  border-radius:7px; 
  padding:2px; 
  text-align:center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="outer"> 
  <div class="inner">поймай меня, если сможешь</div> 
</div>