Плавающее JavaScript меню 2

Суть и идея скрипта описаны в статье плавающее JavaScript меню, но время идет, и тот скрипт уже не отвечает современным требованиям, таким как легкость и простота изменения количества объектов, расширяемость и др., а проще говоря устарел
. В связи с этим предлагаю вашему вниманию новую реализацию старой идеи.
JavaScript код:

var confTimeDelay	= 10;
var confIterations	= 10;
var confKoefScale	= 1;

function ScaleUp(img,iters) {
	var i=iters;
	function UpImg() {
		if(i<=0) return 0;
		img.width += confKoefScale*i;
		window.setTimeout(UpImg, confTimeDelay);
		i--;
	}
	UpImg();
}
function ScaleDown(img,iters) {
	var i=iters;
	function DownImg() {
		if(i<=0) return 0;
		img.width -= confKoefScale*i;
		window.setTimeout(DownImg, confTimeDelay);
		i--;
	}
	DownImg();
}



За присланное спасибо Михаилу Зайцеву (aka Zmi)

А вот до чего можно довести эволюцию данного скрипта с использованием jQuery:

	var confTimeDelay	= 30;
	var confIterations	= 7;
	var confKoefScale	= 1;

	$('#slicemenu > img').mouseover(function (){
			var i = confIterations;
			var img = $(this);
			function UpImg()
			{
				if(i<=0) return;
				img.width(img.width()+confKoefScale*i--);
				setTimeout(arguments.callee, confTimeDelay);
			}
			UpImg();
		}).mouseout(function (){
			var i = confIterations;
			var img = $(this);
			function DownImg()
			{
				if(i<=0) return;
				img.width(img.width()-confKoefScale*i--);
				setTimeout(arguments.callee, confTimeDelay);
			}
			DownImg();
		});


Как видите, здесь нам удалось совсем избавиться от описания обработчиков событий в свойствах изображений и добавление очередного объекта сводится к добавлению img в div с id=»slicemenu».

27.02.09 А вот до чего сократился код с выходом расширения jQuery magnifier:

$('#slicemenu2').magnifier();

Пример наверху.

14 thoughts on “Плавающее JavaScript меню 2

  1. Уважаемый автор. Я конечно понимаю что это красиво. Но вы считаете что данный скрипт оправдан? Я имею в виду с библиотекой jQuery magnifier. Мне кажется тяжеловато будет использовать ее ради тока этого меня.

    Я сам сначала обрадовался, все замечательно, но посмотрев файл 200 кб, как то передумал его использовать.

    Буду рад если найдется какое то более легкое решение этого скрипта.

    ЗЫ Если что то ламерски сказал, не судите строго, я тока начал изучать все эти ajax'ы.

  2. Почему ж ламерски? вполне логичный вопрос.
    Я считаю, что данный скрипт оправдан, потому что сама библа jQuery (кстати 55Кб) не только здесь используется, а magnifier просто в составе полного jQuery UI, поэтому и 200Кб. Если задаться целью и выделить его в отдельный скрипт (потому что magnifier уже не входит по неизвестным мне причинам в jQuery UI), то думаю получится около 20-30Кб.

  3. такой вопрос, при увеличении остальные изображения отползают вниз, реально ли сделать чтоб они по центру оставались?

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

  5. Спасибо, интересная статья. Но было бы ещё интересней, если бы Вы поделились, как сделать так, чтобы увеличение зависило от приближения курсора к картинке, как у Вас в главном меню. Очень интересно )) …

  6. А magnifier то значительно быстрее работает ))

  7. Очень интересное меню. Я новичок в этом деле, выделил код меню того что вверху страницы но не могу сделать с них ссылки. не могли бы Вы подсказать как мне это сделать? Ума не приложу куда что надо вписывать.

  8. глюки при изменении масштаба страницы(firefox 3.5.5), пример наверху

  9. <script> var confTimeDelay = 10; var confIterations = 10; var confKoefScale = 1; var Up=true; var Down=false; function Scale(img,iters, direction) { var i=iters; function UpImg() { if(i<=0) return 0; if(direction) img.width += confKoefScale*i; else img.width -= confKoefScale*i; window.setTimeout(UpImg, confTimeDelay); i—; } UpImg(); } </script> <img src="img/php.png" onmouseover="Scale(this,confIterations,Up)" onmouseout="Scale(this,confIterations,Down)" alt="logo" width="50"> &nbsp;&nbsp;&nbsp;&nbsp; <img src="img/ajax.png" onmouseover="Scale(this,confIterations,Up)" onmouseout="Scale(this,confIterations,Down)" alt="logo" width="50"> &nbsp;&nbsp;&nbsp;&nbsp; <img src="img/html.png" onmouseover="Scale(this,confIterations,Up)" onmouseout="Scale(this,confIterations,Down)" alt="logo" width="50">

  10. V skripte kotorii nahoditsia vishe ia postaralsia umenishiti kod 🙂 Avtoram bolishoe spasibo. P.S: Mojet bit u kogota, esti idee escio umensjit? Esli da to eto budet zabavno

  11. сейчас это можно сделать на css. этот скрипт не имеет смысла

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *