Информация

  • FastVps - Хостинг для форума
  • RegPartner - Домены по правильным ценам

"4admins.ru" Рекомендует

Эффекты при наведении на ссылки через плагин jQuery Effects

Графическое оформление, Шаблоны (html), темы (css), логотипы, картинки, смайлики и другое.
  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Эффекты при наведении на ссылки через плагин jQuery Effects

Сообщение Добавлено: 24 окт 2010, 16:34

Замечательный плагин, который придаст вашему сайту оригинальность и позволит вашим пользователям насладиться замечательными качественными эффектами при наведении курсора на ссылки.

[imgshow]http://img696.imageshack.us/img696/4762/immagine8kk.png[/imgshow] [imgshow]http://img12.imageshack.us/img12/5241/immagine6ek.png[/imgshow]

Установка

В шаблон overall_header.html после </head> вставляйте:

Код: Выделить всё
<script type="text/javascript" src="http://demonstration1.4admins.ru/storage/demonstration1_4admins_ru/images/jquery.jeffects.js"></script> 
   
  <script> 
  $( function() {
  $("a[href]").jEffects({
  type:'bomb',
  randomizeParticles: true,
  colors: [ "#f88", "#8e4", "#4bf"],
  particles: 16,
  radius:64
   
  });
  });
  </script> 
  <style>
  .effects { clear:both } 
  .effects li { display:inline-block; *display:inline; font-size:24px; padding:4px 10px; cursor:pointer }
  .effects li:first-child { background:#222; float:left; opacity:0.6; height:auto; width:180px; text-align:left; }
  .effects li:hover { color:#fff; }
   
  i { font-size:0.5em }
   
  .jEffects-particle { font-size:20px; font-family:arial; z-index:2; position:absolute }
   
  .distance { height:80px;}
  .distance li.first { *margin-right:160px; }
  .distance li { *float:left; height:40px; vertical-align:top; border-top:1px solid #666; }
   
  .distance li img { opacity:0.6 }
  .distance li:hover img { opacity:1.0 }
   
  .concentrate li { opacity:0.6; }
  .concentrate li:hover { opacity:1.0; }
   
   
  #overview { margin:auto; width:370px; text-align:left; color:#fff }
  #overview pre { background:#246; padding:4px; }
   
  .themes { position:fixed; left:0; top:0; z-index:10; width:100% }
  a.theme { float:left; background:#eee; color:#222; top:0; display:block; padding:6px; font-size:24px; height:46px; line-height:46px; }
  a.buy { background: #202020; color:#FFFFFF; }
  a.white { left: 0; }
   
  .jeffects_min { display:none }
   
  .jorbital { float:right; color:#fff }
  </style>

Всё, скрипт установлен и готов к работе.

Разберёмся с настройками:
type:'bomb', - тип используемой анимации (fireball , bomb , snow , bubbles , concentrate).
randomizeParticles: true, - использовать ли беспорядочные направления анимации (true или false).
colors: [ "#f88", "#8e4", "#4bf"], - используемые цвета.
particles: 16, - количество вылетающих элементов при наведении.
radius:64 - максимальный радиус элемента.
jquery.jeffects.js
(10.06 Кб) Скачиваний: 153
Работает во всех браузерах.
Копирайт и пример работы можно посмотреть здесь.
Пример работы скрипта на форуме.
Графический контент для вашего форума!
Изображение

За это сообщение пользователя Shans поблагодарили:
Автор, Bukovka, Сибиряк, GoDFaTHeR, vikweb

Вернуться в Оформление Форума

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 5