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

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();
}

         

	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();
		});

         

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

• Tweet

Комментарии:

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

Уважаемый автор. Я конечно понимаю что это красиво. Но вы считаете что данный скрипт оправдан? Я имею в виду с библиотекой jQuery magnifier. Мне кажется тяжеловато будет использовать ее ради тока этого меня. Я сам сначала обрадовался, все замечательно, но посмотрев файл 200 кб, как то передумал его использовать. Буду рад если найдется какое то более легкое решение этого скрипта. ЗЫ Если что то ламерски сказал, не судите строго, я тока начал изучать все эти ajax\'ы.

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

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

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

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

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

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

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

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

Спасибо автору!
ЗЫ порой проскакивает сей баг о_О http://habreffect.ru/files/853/77620d749/Снимок1.jpg

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

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

от кого: