[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 - максимальный радиус элемента.
Работает во всех браузерах.
Копирайт и пример работы можно посмотреть здесь.
Пример работы скрипта на форуме.