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

Попробуем создать меню на JavaScript, чтобы его пункты плавно приближались при наведении и плавно уменьшались по onmouseout.
Идея проста: по событиям onmouseover и onmouseout пункта меню пошагово изменяем его размеры с помощью setTimeout. 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++;}
}

Обратите внимание на то, что img каждого пункта меню имеет уникальный порядковый id, а все меню заключено в теги span с особой обработкой onmouseout для возвращения всех пунктов в исходное состояние.

ajax
php
javascript
html

пример:

15 Комментарии “Плавающее JavaScript меню

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

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

  3. Если есть терпение то разьясните следующее: <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];
    } Спасибо за ответ.

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

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

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

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

  6. Доброго времени суток,
    Отличный вариант меню,

    Ниразу не имел дело с javascripts,
    как я понял первый код вставляется в scr/jquery.js , второй в саму страницу, и меню выводится через
    <script type="text/javascript" src="scr/jquery.js"></script>

    В результате чего ничего не получается )))
    Можно поподробней, что куда вставляется ?

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

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

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

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

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

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

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

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

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

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

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