Пятница, 17.05.2024, 15:12
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Январь » 25 » меню с эффектом плавного увеличения при наведении
    11:33
    меню с эффектом плавного увеличения при наведении
    Результат

    подключаем 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>
    Категория: скрипты для ucoz сайта | Просмотров: 1718 | Добавил: Bogdan4eg | Рейтинг: 0.0/0
    Всего комментариев: 121 2 »
    12 qCaRTp  
    0
    Это... как его.... можно чтобы так было везде??? На всех картинках

    11 NoName74  
    0
    люди, просто из ПРИМЕРа вытащите код biggrin

    10 Мирослав  
    0

    9 allru  
    0
    и куда? очень нужно. срачно. плз. помогите

    8 allru  
    0
    а как ставить?

    7 NoName74  
    0
    я кое как вставил, кул, работает! biggrin

    6 lдимон  
    0
    нормальна абеснить несудьба

    5 NoName74  
    0
    ну да, ещёб догадаца куда пихать

    4 drago751  
    0
    как меня это бесит, пишите куда вставлять!

    3 padishax  
    0
    booze www.cstrike-life.3dn.ru

    1-10 11-12
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]