Попробуем создать меню на 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 для возвращения всех пунктов в исходное состояние.

<span onmouseout="stop=1; imn=0; g();">
<img id="i1" src="img/ajax.png" alt="ajax" width="50" onmouseover="stop=1; imn=1; g();">
<img id="i2" src="img/php.png" alt="php" width="50" onmouseover="stop=1; imn=2; g();">
<img id="i3" src="img/javascript.png" width="50" alt="javascript" onmouseover="stop=1; imn=3; g();">
<img id="i4" src="img/html.png" width="50" alt="html" onmouseover="stop=1; imn=4; g();">
</span>

Добавлено: 20 Апреля 2018 16:16:54 Добавил: Андрей Ковальчук Нравится 0

Добавить