Функция при которой элемент убегает от курсора,как можно ее написать более удобно

234

07 января 2018, 08:06

Итак вопрос в следующем,есть фрагмент кода который через проверку If позволяет элементу в моем случае это картинка,убегать от курсора,но выполнил лично я это не в очень удобной форме,хотел бы узнать как на ЧИСТОМ JS - это важно,без JQery выполнить данную функцию,но чтобы элемент убегал во все стороны (рандомно)а не четко туда куда я прописал,ибо у меня он бегает просто по квадрату

//html элемент который и убегает от курсора 
<div id="slavik" class="container">
    <img src="Без имени-1.png" width="100px">
 </div>
 //функция - при наведении курсора на элемент он убегает вправо либо вниз 
    run.onmouseover = function t() {
        if (bot == 1) slavik.style.left = "500px";
        if (bot == 2) slavik.style.top = "200px";
        if (bot == 3) slavik.style.left = "300px";
        if (bot == 4) slavik.style.top = "100px";
        if (bot == 5) slavik.style.left = "200px";
        if (bot == 6) slavik.style.top = "600px";

        bot = bot + 1;
        console.log(bot);
        if (bot == 6) bot = 1;
    }

Answer 1

А если просто рандомные left и top задавать при наведении?

var elemLeft, elemTop, maxElemLeft, maxElemTop, elem; 
 
elem = document.getElementById('slavik'); 
 
maxElemLeft = document.documentElement.clientWidth - elem.offsetWidth; 
maxElemTop = document.documentElement.clientHeight - elem.offsetHeight; 
 
elem.onmousemove = handler; 
 
function handler() { 
  elemLeft = Math.random() * maxElemLeft; 
  elem.style.left = elemLeft + 'px'; 
  elemTop = Math.random() * maxElemTop; 
  elem.style.top = elemTop + 'px'; 
  //console.log(elemLeft+' - '+elemTop); 
}

#slavik{ 
  width: 100px; 
  height: 100px; 
  position: absolute; 
  background: red; 
}

<div id="slavik"></div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Изменение цвета кнопки button при заполнении полей text и password

Есть такой код

330

javascript

Помогите с DragNDrop на чистом js?

Я решил схитрить и у меня это не получилосьВ итоге запутался еще больше

228

javascript

Как сгруппировать <li> в спойлер на js или jquery

ЗдравствуйтеВ общем, есть такой html:

271

javascript

Правильно ли сделан индикатор загрузки?

У меня есть приложение, каждая страница которого состоит из нескольких компонентовпосле некоторого события происходит большой асинхронный...

238