onmouseover, onmouseout

2_k · November 17, 2009

Использую такой скрипт для выделения картинок:

onmouseover="document.getElementById('...').style.display = 'block';"
onmouseout="document.getElementById('...').style.display = 'none';"

Единственный минус в том что происходит это резко. Существует ли споcоб сделать "срабатывание" onmouseover, onmouseout плавным?

s0rr0w · November 17, 2009

Использую такой скрипт для выделения картинок:
onmouseover="document.getElementById('...').style.display = 'block';"
onmouseout="document.getElementById('...').style.display = 'none';"
Единственный минус в том что происходит это резко. Существует ли споcоб сделать "срабатывание" onmouseover, onmouseout плавным?

копать в сторону setTimeout, setInterval

Veseloff · November 17, 2009

можно использовать jquery animate

Searcher · November 17, 2009

можно использовать jquery animate

вообще, это элементарная задача, зачем тащить для етого весь JQ или что-то аналогичное? Для начинающих лучше освоить JavaScript, а потом уже фреймворки всякие использовать. Поскольку придет понимание, что для решения простых задач и создания простых эффектов нужен маленький скрипт, а уж если сайт напичкан динамикой и эффектами, тогда уж можно и фреймворк.

Great Rash · November 17, 2009

Совсем не в тему, а может и в тему...

Кто-нить знает ссылку на туториал или тупо сайт с формулой движения с замедлением... не знаю как по русски называется, по инглишу ease in (ease out). Поизучал бы так де тему bounce (отскока).

s0rr0w · November 17, 2009

Совсем не в тему, а может и в тему...
Кто-нить знает ссылку на туториал или тупо сайт с формулой движения с замедлением... не знаю как по русски называется, по инглишу ease in (ease out). Поизучал бы так де тему bounce (отскока).

Формула простая как двери.

У тебя есть текущее положение cx, и конечная точка xf.

На каждой итерации newX = ( xf + cx )/2

Вместо 2 можно подставлять коэффициент. Если коэффициент увеличивать от 0 до 2 по формуле выше, то получим ease out

Отскок делается тоже просто, но все зависит от параметров. Для JQ есть плагин, который делает кучу вариаций анимирования, там все формулы есть.

Great Rash · November 17, 2009

Спасибо, обязательно попробую написать скриптик.

Great Rash · November 17, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" /> 

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: normal 14px Arial, Tahoma, Verdana, sans-serif;
		}

		body {
			margin: 0 10px;
		}
	</style>

	<script type="text/javascript">
		function Animate() {
			var prnt = this;
			this.generateHTML();
		}

		Animate.prototype.generateHTML = function() {
			this.div = document.createElement('div');
			this.div.style.position = 'absolute';
			this.div.style.width = this.div.style.height = 100 + 'px';
			this.div.style.background = 'red';

			document.body.appendChild(this.div);

			this.start();
		}

		Animate.prototype.start = function() {
			var prnt = this;
			var step = 0;

			this.div.int = window.setInterval(function() {
				if (!prnt.div.curX) {
					prnt.div.curX = 0;
				}

				prnt.div.curX = prnt.easeIn(prnt.div.curX, 500);
				prnt.div.style.left = prnt.div.curX + 'px';
				step++;

				if (step > 50) {
					window.clearInterval(prnt.div.int);
				}
			}, 100);
		}

		Animate.prototype.easeIn = function(curX, endX) {
			return (endX + curX) / 2;
		}
	</script>
</head>

<body>

	<script type="text/javascript">
		new Animate();
	</script>

</body>
</html>

Работает! только анимация получилась дерганая... это из-за моего ноута слабенького или из-за чего?

s0rr0w · November 17, 2009

Работает! только анимация получилась дерганая... это из-за моего ноута слабенького или из-за чего?

Так, я тебе наврал чуток с формулой

curX + (endX - curX) / 4

И нельзя выходить из цикла по счетчику, лучше выходить при равенстве curX и endX

Формула простая

У нас есть текущее положение. Мы расстояние от текущего положения до конечной точки делим на 4, и прибавляем к текущему положению результат

0 + ( 500 -0 ) / 4 = 125

125 + ( 500 - 125 ) / 4 = 219

219 + ( 500 - 219 ) / 4 = 289

и так далее.

Great Rash · November 17, 2009

Анимация все равно дерганная, плюс уж очень долго до максимального значения доезжает... Изменил скрипт чутка для наглядности.

function Animate() {
			var prnt = this;
			this.generateHTML();
		}

		Animate.prototype.generateHTML = function() {
			this.div = document.createElement('div');
			this.div.style.position = 'absolute';
			this.div.style.width = this.div.style.height = 100 + 'px';
			this.div.style.background = 'red';

			document.body.appendChild(this.div);

			this.start();
		}

		Animate.prototype.start = function() {
			var prnt = this;

			this.div.int = window.setInterval(function() {
				if (!prnt.div.curX) {
					prnt.div.curX = 0;
				}

				prnt.div.curX = prnt.easeIn(prnt.div.curX, 500);
				prnt.div.style.left = prnt.div.curX + 'px';
				prnt.div.innerHTML = prnt.div.style.left;

				if (prnt.div.curX == 500) {
					window.clearInterval(prnt.div.int);
				}
			}, 100);
		}

		Animate.prototype.easeIn = function(curX, endX) {
			return curX + (endX - curX) / 4;
		}

UPD: ща гуглил по этому поводу, ничего не нашел, зато этот топик уже в топ 10 на 3 месте гугль выдает! Быстро работают черти

Запрос "ease-in formula"

Edited November 17, 2009 by Great Rash

s0rr0w · November 17, 2009

Я тут тебе чуток оптимизации сделал

		Animate.prototype.start = function() {
			var prnt = this;
			var step = 0;

				if (!this.div.curX) {
					this.div.curX = 0;
				}

			this.div.int = window.setInterval(function() {
		var curX = prnt.div.curX;
		curX += (500 - curX) / 10;
		prnt.div.style.left = curX + 'px';
		prnt.div.curX = curX;
				if ( curX == 500 ) window.clearInterval(prnt.div.int)
			}, 100);
		}

Great Rash · November 17, 2009

Не понял, почему теперь делим на 10? Формула ж такая:

curX + (endX - curX) / 4

s0rr0w · November 17, 2009

Не понял, почему теперь делим на 10? Формула ж такая:
curX + (endX - curX) / 4

Чем больше делитель, тем дольше будет ехать до пункта назначения.

Поставил задержку у таймаута в 13 (в JQ почему-то такая стоит)

Анимация стала плавной и шелковистой.

http://www.lemonsanver.com/jQuery/jquery.animation.easing.js

Мешок формул с демонстрацией вот тут

http://www.lemonsanver.com/jQuery/easingAnimationPlugin.html

Great Rash · November 17, 2009

О! Надо будет короче свой собственный аниматор сделать. Понатырю формул и буду анимировать все, что под руку попадется.

s0rr0w · November 17, 2009

О! Надо будет короче свой собственный аниматор сделать. Понатырю формул и буду анимировать все, что под руку попадется.

Тогда тебе нужно будет еще и оптимизационные схемы изучить.

Great Rash · November 17, 2009

Чаво?

2_k · November 17, 2009

копать в сторону setTimeout, setInterval

Спасибо начал копать, много чего нашёл, но не выходит использовать, может грубым примером подскажите?

Great Rash · November 17, 2009

2_k

Смотрите мои посты и посты камрада s0rr0w, там уже практически готовый код. Только менять вам нужно не отступ слева, а прозрачность. Можно менять сразу и прозрачность и размеры картинки, ну и вообще поварьировать. Смотря какого эффекта надо добиться.

2_k · November 17, 2009

2_k
Смотрите мои посты и посты камрада s0rr0w, там уже практически готовый код. Только менять вам нужно не отступ слева, а прозрачность. Можно менять сразу и прозрачность и размеры картинки, ну и вообще поварьировать. Смотря какого эффекта надо добиться.

Смотрю ваши примеры, но т. к. я в js ноль без палочки, ничего не понимаю. Может быть, если не очень трудно, всё же на моём примере покажете? То есть как например в строку onmouseover добавить этот параметр setTimeout?

полный пример использованиея скрипта у меня выглядит так:

<a href="/name/section/a/b/" onmouseover="document.getElementById('details').style.display = 'block';"
onmouseout="document.getElementById('details').style.display = 'none';" class="linm" >
<span class="des-menu2" style=" margin-left: 0px; //margin-left: 5px; " ><div id="details"></div>text</span>
<img src="/name/images/pic.jpg" alt="" /></a>


<a href="/name/section/e/f/" onmouseover="document.getElementById('details2').style.display = 'block';"
onmouseout="document.getElementById('details2').style.display = 'none';" class="linm" >
<span class="des-menu2" style=" margin-left: 0px; //margin-left: 5px; " ><div id="details2"></div>Text</span>
<img src="/name/images/pic2.jpg" alt="" /></a>

//и т. д.

s0rr0w · November 17, 2009

Смотрю ваши примеры, но т. к. я в js ноль без палочки, ничего не понимаю.

Ну, а мы тут при чем? Хотите получить результат? У вас есть два выхода

1. Выучить все самому и сделать так, как душа пожелает

2. Заплатить человеку, который в этом разбирается, и он напишет код за вас.

Чаво?

Таво.

Код нужно оптимизировать. Например, если можно отказаться от вызова функции, то лучше от него отказаться.

Если где-то используется обращение к свойствам объекта более одного раза, то лучше сначала присвоить свойство переменной, потом уже пользоваться.

Советую посмотреть тот кусок, который я дал.

Great Rash · November 18, 2009

По поводу оптимизации понял спасибо. Где про это почитать подробней можно?

2_k, ну что вам сказать... гуглите. Просто писать скрипт за вас и правда нет ни времени ни желания. Может и найдется тут кто доброволец.

Советаю все таки попытаться разобраться в наших скриптах. В помощь могу дать несколько ссылок:

Свойства и методы объекта window (в том числе и setTimeout и setInterval): http://www.w3schools.com/jsref/obj_window.asp

Уроки по JavaScript (плюс спецификация): http://www.w3schools.com/js/default.asp

Сайт буржуйский, но очень удобный.

Вашу проблему неполучится решить прописыванием чего-либо в onmouseover/onmouseout, тут надо писать скрипт, надо писать функцию которую уже вызывать при событии onmouseover/onmouseout.

Еще могу посоветовать заглянуть в раздел "Фрилансеры и резюме", если уж совсем влом самому что-то делать, то там кажись один человек забесплатно услуги предлагал.

s0rr0w · November 18, 2009

По поводу оптимизации понял спасибо. Где про это почитать подробней можно?

Гугль дает много ссылок Я их не собирал.

Да и тесткейзы рулят. Делается 1Е6 повторений одного и того-же кода. Засекается время до и после. Разница даст производительность.

Sign In

onmouseover, onmouseout

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information