Понедельник, 14.07.2025, 10:25
Приветствую Вас Гость | RSS
Скрипты и шаблоны
Главная
Регистрация
Вход
Меню сайта

Категории раздела
Скрипт [2048]
Шаблон [18]
Другое [6]
Шапки [1]

Наш опрос
Добавили этот сайт в закладки?
Всего ответов: 79

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная » 2009 » Январь » 25 » меню с эффектом плавного увеличения при наведении
19:32
меню с эффектом плавного увеличения при наведении
Результат

подключаем 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>


Источник: helper.ucoz.ru
Категория: Скрипт | Просмотров: 629 | Добавил: Cr@ze | Рейтинг: 0.0/0
Всего комментариев: 1
1 velobreiker  
0
прикольная игра dangerwars.com

Имя *:
Email *:
Код *:
Поиск

Календарь
«  Январь 2009  »
Пн Вт Ср Чт Пт Сб Вс
   1234
567891011
12131415161718
19202122232425
262728293031

Архив записей


Copyright MyCorp © 2025