Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2008, 01:12
Аватар для SergeiAzarov
Интересующийся
Отправить личное сообщение для SergeiAzarov Посмотреть профиль Найти все сообщения от SergeiAzarov
 
Регистрация: 27.02.2008
Сообщений: 13

Движение объектов.
Хочу реализовать следующую задачу: объект при наведении на него курсора начинает двигаться по линейной траектории. Как только курсор покидает поле объекта он должен начать двигаться в обртаном направлении и встать в исходную позицию.
В качестве объекта использую <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(). Меня интересует есть ли какое-то свойство у объектов пор которому можно определить в фокусе он или нет?
Пока что предполагаю отслеживать координаты курсора, вычислять положение объекта и таким образом определять положение курсора относительно объекта, но это слишком громоздко, хотелось бы более элегантного решения.
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2008, 04:22
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Это довольно тривиальная задача.
По первому вопросу:
<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 всё в порядке. Для полной кроссбраузерности придется, наверно, считать координаты.

Последний раз редактировалось Андрей Параничев, 11.03.2008 в 04:25. Причина: Глючит подсветка синтаксиса :Р
Ответить с цитированием
  #3 (permalink)  
Старый 11.03.2008, 13:54
Аватар для SergeiAzarov
Интересующийся
Отправить личное сообщение для SergeiAzarov Посмотреть профиль Найти все сообщения от SergeiAzarov
 
Регистрация: 27.02.2008
Сообщений: 13

Большое спасибо. То что нужно!
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2008, 13:40
Гость
 
Сообщений: n/a

Обьясните пожалуйста, почему данная конструкция не работает у меня ни в одном браузере? С чем это может быть связано? У меня вылазит рисунок в заданной позиции, но он не двигается согласно указанным функциям..
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2008, 01:26
Новичок на форуме
Отправить личное сообщение для partyzan Посмотреть профиль Найти все сообщения от partyzan
 
Регистрация: 09.04.2008
Сообщений: 8

Наверно <style> нужно заключить между дискрипторами <head>
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2008, 05:07
Гость
 
Сообщений: n/a

Сообщение от partyzan Посмотреть сообщение
Наверно <style> нужно заключить между дискрипторами <head>
Style вообще можно прописать прямо в <div>, и он работает, т.е. div отображается согласно стилю. Проблема в том, что он не желает никуда двигаться)
Ответить с цитированием
  #7 (permalink)  
Старый 20.09.2009, 10:19
Странник
 
Сообщений: n/a

Тут скорее проверка на вшивость ))
вместо

var slidediv = document.getElementById('image');

следует читать

var slidediv = document.getElementById("image");
Ответить с цитированием
  #8 (permalink)  
Старый 06.04.2010, 22:10
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Мне нужно точно такое же действие, но только по событию onclick. Подскажите пожалуйста как можно на один и тотже элемент поставить два события onclick.
Ответить с цитированием
  #9 (permalink)  
Старый 06.04.2010, 22:22
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,103

Читайте:
http://javascript.ru/tutorial/events/intro
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2010, 23:39
Новичок на форуме
Отправить личное сообщение для unforma Посмотреть профиль Найти все сообщения от unforma
 
Регистрация: 17.04.2010
Сообщений: 3

Div двигается медленно
Как в приведенном Андреем Параничевым коде div заставь двигаться быстрее. 40 изменил на 1 но это реально медленно.


Как div заставить двигаться быстрее???
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как выполнить движение объекта scuter Элементы интерфейса 5 08.06.2008 22:57
Как определить включен ли поддержака объектов ActoveX feodul Events/DOM/Window 5 02.06.2008 11:04