Плавающее 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();

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

 

Оцените статью
Добавить комментарий

  1. IQ-40

    забавный эффект! 🙂

  2. BaN

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

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

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

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

  3. Alek Veritov

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

  4. Fedr

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

  5. Мангуст

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

  6. tweenfaster

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

  7. Alek Veritov

    а я поделился — jQuery magnifier. в подробности реализации я не вникал. вот вам ссылочка на исходный текст, на всякий случай:
    http://dev.jquery.com/browser/trunk/plugins/ui/ui.magnifier.js?rev=3404

  8. Antony

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

  9. SPARTAK

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

  10. кир

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

  11. Mihail Zimbru

    <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">

  12. Mihail Zimbru

    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

  13. koshublike@gmail.com

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

  14. Андрей

    Добавил ваше руководство в закладки, в работе очень пригодится!