Движение объектов.
Хочу реализовать следующую задачу: объект при наведении на него курсора начинает двигаться по линейной траектории. Как только курсор покидает поле объекта он должен начать двигаться в обртаном направлении и встать в исходную позицию.
В качестве объекта использую <div id="pict"> абсолютно позиционированный, с картинкой в background. При наступлении события onmouseover выполняется функция slide(), при onmouseout выполняется функция slideback(). function slide(){ for (var i=100; i<200;i++) { pict.style.left=i+"px"; } } Вот в этом месте возникает первая неприятность, цикл обрабатывается слишком быстро. Пробовал притормозить его при помощи setInterval, но успеха добиться не смог. Есть какие-то альтернативные функции которые сделают задержку в каждой итерации?? И вопрос номер 2: Полагаю что когда добьюсь плавного скольжения функция slide будет выполняться до конца, даже если курсор покинет картинку раньше. Соответственно имеет смысл в каждой итерации проверять находится курсор над нашим объектом и если он покинул пределы объекта прекратить выполнение функции slide, вернуть текущее значение переменной i и передать его в функцию slideback(). Меня интересует есть ли какое-то свойство у объектов пор которому можно определить в фокусе он или нет? Пока что предполагаю отслеживать координаты курсора, вычислять положение объекта и таким образом определять положение курсора относительно объекта, но это слишком громоздко, хотелось бы более элегантного решения. |
Это довольно тривиальная задача.
По первому вопросу:
<style>
#image {
position: absolute;
top: 20px;
left: 4px;
background: #FFAAFF;
padding: 10px;
}
</style>
<div id="image" onMouseOver="slide()" onMouseOut="slideback()">Here is something</div>
<script language="JavaScript">
var slidepos = 4;
var slidediv = document.getElementById('image');
var sliding = false;
function slide() {
// Изначально убираем интервал (на всякий случай)
sliding = clearInterval(sliding);
// Ставим интервал (тут 40 ms - скорость движения, меньше=быстрее)
sliding = setInterval(function() {
if( slidepos < 600 ) {// Двигаемся до 600 пикселей
slidepos++;
slidediv.style.left = slidepos; // Тут лучше без px - глючит в konqueror
} else {
// Убираем интервал, когда он не нужен
sliding = clearInterval(sliding);
}
}, 40 );
}
function slideback() {
sliding = clearInterval(sliding);
sliding = setInterval(function() {
if(slidepos > 4) { // до начальной позиции
slidepos--;
slidediv.style.left = slidepos;
} else {
sliding = clearInterval(sliding);
}
}, 40 );
}
</script>
По второму вопросу могу сказать, что если это не критично, дополнительно обрабатывать события (кроме onMouseOver, onMouseOut), не надо. Обидно, что в некоторых браузерах, когда окошко само уплывает из-под мышки событие onMouseOut не вызывается, вот в FF всё в порядке. Для полной кроссбраузерности придется, наверно, считать координаты. |
Большое спасибо. То что нужно!
|
Обьясните пожалуйста, почему данная конструкция не работает у меня ни в одном браузере? С чем это может быть связано? У меня вылазит рисунок в заданной позиции, но он не двигается согласно указанным функциям..
|
Наверно <style> нужно заключить между дискрипторами <head>
|
Цитата:
|
Тут скорее проверка на вшивость ))
вместо var slidediv = document.getElementById('image'); следует читать var slidediv = document.getElementById("image"); |
Мне нужно точно такое же действие, но только по событию onclick. Подскажите пожалуйста как можно на один и тотже элемент поставить два события onclick.
|
|
Div двигается медленно
Как в приведенном Андреем Параничевым коде div заставь двигаться быстрее. 40 изменил на 1 но это реально медленно.
Как div заставить двигаться быстрее??? |
| Часовой пояс GMT +3, время: 20:41. |