[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Скрипты для Ucoz » Другие скрипты для uCoz » Меню с эффектом плавного увеличения при наведении (Меню с эффектом плавного увеличения при наведении)
Меню с эффектом плавного увеличения при наведении
_-=ADMIN=-_Дата: Воскресенье, 25.01.2009, 08:40 | Сообщение # 1
Генералиссимус
Группа: VIP
Сообщений: 189
Репутация: 21
Статус: Offline
подключаем jQuery
CSS:
Code
a img.MenuImg {border: 0px none; }

там, куда выводим меню
Code
<div id="TheMenu"></div>

Code
<script>   
   Icons = ['http://www.iconarchive.com/icons/mayosoft/aero-vista/Oficina-HTML2-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/System-Binary-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/Sistema-Fuente-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/Oficina-TXT-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/Video-AVI-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/Comprimidos-SIT-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/Broken-128x128.png', 'http://www.iconarchive.com/icons/mayosoft/aero-vista/Imagen-PNG-128x128.png']; // меняем на URL картинок   
   URLs = ['http://free-manga.net.ru/', 'http://free-manga.net.ru/', 'http://free-manga.net.ru/', 'http://free-manga.net.ru/', 'http://free-manga.net.ru/', 'http://free-manga.net.ru/', 'http://free-manga.net.ru/', 'http://free-manga.net.ru/']; // меняем на ссылки   
   Orientation = 'h'; // h - горизонтальное меню, v - вертикальное   
   Heights = [128, 100, 80, 60]; // высоты элементов, нулевой элемент - высота элемента над которым курсор, следующие значения - высоты соседних элементов   
   Opacities = [1.0, 0.8, 0.4, 0.15]; // то же что и выше, только здесь прозрачность   
   MenuAlign = 'center'; // выравнивание всего меню   
   VAlign = 'top'; // вертикальное выравнивание картинок в меню top, bottom (для гор. меню)   
   HAlign = 'center'; // горизонтальное выравнивание right, left (для верт. меню)   
   Speed = 250; // скорость   

   MenuCode = '<table id="MenuTable" style="height: ' + (Heights[0] - - 10) + 'px; ">';   
   if (Orientation === 'h') {   
     MenuCode += '<tr>';   
     for (i = 0; i < Icons.length; i++) {   
      MenuCode += '<td valign="' + VAlign + '"><a href="' + URLs[i] + '"><img style="height: ' + Heights[Heights.length - 1] + 'px; " src="' + Icons[i] + '" class="MenuImg"></a></td>';   
     }   
     MenuCode += '</tr>';   
   } else {   
     for (i = 0; i < Icons.length; i++) {   
      MenuCode += '<tr><td align="' + HAlign + '"><a href="' + URLs[i] + '"><img style="height: ' + Heights[Heights.length - 1] + 'px; " src="' + Icons[i] + '" class="MenuImg"></td></a></tr>';   
     }   
   }   
   MenuCode += '</table>';   
   $('#TheMenu').html(MenuCode).attr('align', MenuAlign);   

   $('img.MenuImg').animate({height: Heights[Heights.length - 1] + "px", opacity: Opacities[Opacities.length - 1]}, 1).each(function (j) {   
   jQuery(this).hover(function () {   
      $('img.MenuImg').stop();   
      for (i = 0; i < $('img.MenuImg').length; i++) {   
       jQuery('img.MenuImg:eq(' + i + ')').animate({height: (Math.abs(i - j) < Heights.length ? Heights[Math.abs(i - j)] + "px" : Heights[Heights.length - 1] + "px"), opacity: (Math.abs(i - j) < Opacities.length ? Opacities[Math.abs(i - j)] : Opacities[Opacities.length - 1])}, Speed);   
      }   
     }, function () {   
     });   
   });   

   $('#MenuTable').hover(function () {   

   }, function () {   
     $('img.MenuImg').stop().animate({height: Heights [Heights.length - 1] + "px", opacity: Opacities[Opacities.length - 1]}, Speed);   
   });   
   </script>

Пример:http://free-manga.net.ru/the-menu.html
 
Форум » Скрипты для Ucoz » Другие скрипты для uCoz » Меню с эффектом плавного увеличения при наведении (Меню с эффектом плавного увеличения при наведении)
  • Страница 1 из 1
  • 1
Поиск: