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

var imn;
var icount = 4; 	// image count
var iw = 49;		// start width
var iw2 = 90;		// end width
var ih = 74;		// start height
var ih2 = 135;		// end height
var stop;

function g() {
	for(i=1;i<=icount;i++) {
		var im = document.getElementById("i"+i);
		if(imn!=i) {			
			im.width=(im.width>=iw)?(im.width-2):im.width;
			im.height=(im.height>=ih)?(im.height-2):im.height;
		}
		else {
			im.width=(im.width<=iw2)?(im.width+2):im.width; 
			im.height=(im.height<=ih2)?(im.height+2):im.height;
		}
	}
	if(stop<iw2-iw || stop<ih2-ih) {setTimeout("g()", 20); stop++;}
}

• Tweet

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

Отличный скрипт. Мне очень понравился. Только я в нём не разобрался. Обьясните пожалуйста поподробнее. Спасибо.

Смысл в том, чтобы последовательно перебрать все img меню и установить им нужный размер, что и делает цикл for. Если img onmouseover, то его размер растет с шагом 2, а остальные уменьшаются или не изменяются. Функция вызывает сама себя до достижения min/max размеров изображений. Скрипт не универсален, можно было бы вынести шаг (step) в глобальные переменные, а условие рекурсии проверять так: if(stop<(iw2-iw)/step && stop<(ih2-ih)/step)

Если есть терпение то разьясните следующее: <TD onmouseout="stop=1; imn=0; g();" align=middle>(для чего здесь onmouseout="stop=1; imn=0; g();"), что за картинка about.gif и about_s.gif, почему в onmouseout указывается height=48, а в src="плавающее меню на JavaScript.files/html_s.gif" width=48, а в onmouseover вообще ничего не указывается?
И наконец var d = document;
var yourImages = new Array('img/js.gif','img/html.gif','img/php.gif','img/ajax.gif', 'img/about.gif');
var preImages = new Array();
for (i = 0; i < yourImages.length; i++)
{
preImages[i] = new Image();
preImages[i].src = yourImages[i];
} Спасибо за ответ.

onmouseout="stop=1; imn=0; g();" - для того, чтобы когда уходишь с меню все img возвращались в исходное.

картинки с _s это просто маленькие версии. Дело в том, что непропорционально увеличенные/уменьшенные картинки отображаются коряво, поэтому я подменяю img src по наведению мыши, чтобы избавиться от кривизны.

var d = document; var yourImages = new Array ... это предзагрузка "больших" картинок.

Я заметил что вы в скрипте статически прописываете количество картиночек в меню, я понимаю то для примера это конешно не важно, но все же я бы предложил следующиий подход - ведь он красивый =):
function g()
{
var divImages = document.getElementById('divImages');
var icount = (divImages.childNodes.length+1);
... // дальше как есть
все картинки (table с ними) заключить в <div id='divImages'> ... </div>
// хотя в реальности количество элементов будет определятся каждый вызов и все по мне не плохой вариант, тем более можно чутка модернизировать если не нравится =)
Удачи в работе, спасибо за отличный сайт.

Доброго времени суток, Отличный вариант меню, Ниразу не имел дело с javascripts, как я понял первый код вставляется в scr/jquery.js , второй в саму страницу, и меню выводится через <script type="text/javascript" src="scr/jquery.js"></script> ... В результате чего ничего не получается ))) Можно поподробней, что куда вставляется ?

Клевая менюха... авторю респект... один вопрос, почему нельзя передовать id через this.id в качестве аргумента функции? Это существенно бы сократило код.

Подскажите мне тупому не могу понять как вставить ссылка на страницу в скрипт.

Подскажите.
как этот код вписать в html странцу. Вопрос может и тупой, но я первый раз сталкнулся с java и не знаю как это делается....зарание спасибо

Спасибо. Статья кульь... только не пойму.... чем достигаеться эффект ПЛАВНОГО перехода

Зачем рассказывать людям о коде, который сами бы ни за что не стали использовать. Готовую javascript библиотеку ведь просто подключить, не правда ли?

to nifo: замечание вполне справедливо, в таком виде я этот скрипт нигде не использую, в верхнем меню задействован скрипт на основе jquery.magnifier, который, к слову, давно не поддерживается, поэтому пришлось допиливать самостоятельно. Ответ на ваш вопрос зачем - в обучающих целях.

Респект и уважуша автору!!!! Сайту - жить!!! Пасибо, во многом помогли!!!!

Спасибо за ваш сайт. Все просто и понятно. Очень интересные примеры.

``в верхнем меню задействован скрипт на основе jquery.magnifier``
в подробностях не получается пока разобраться, но в верхнем меню однозначно изменение более стабильное (не дёргается, не скачет). От чего так? Если не секрет.

От того, что данный скрипт представлен в учебных целях - упрощен до предела, не учитываются пропорции, размер контейнера и т.д. Цель статьи не дать готовое решение (их много и так), а показать как все это работает. Поняв суть, приведенный скрипт легко можно допилить под свои нужды. Ну а magnifier соответственно уже доведен до ума, это одно из готовых решений.

u menya paluchilsa :) balshoe vam spassibo prosto ruski yazik tak chotko ne znayu chtob po dastoynomu vasxvalyat vash brend ). pravilam vashevoo sayta ya uje mnogo ras s raznimi ip ami skazal spasibo ;) i po moemu vi bi ne bili protiv uvidet vash trud v stranicax drugix saytov vot smatrite kak paluchilsa v html stranice i esli est vremeni chitayte interesnuyu statyu v nashem sayte :)

от кого: