Показать сообщение отдельно
  #2 (permalink)  
Старый 11.03.2008, 05: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 в 05:25. Причина: Глючит подсветка синтаксиса :Р
Ответить с цитированием