Скачать
Сейчас набрёл на один очень интересный плагин и решил выложить его и разжевать все настройки и функционал
Для начала посмотрите
ДЕМО
Установка:
1#: В самый низ после тега /body на нужных страницах вставляйте:
|
|
<script src="/js/jquery-ui.min.js"></script> <script src="/js/jquery.imgexplosion.js"></script> |
2#: Сразу после предыдущего кода вставляйте это:
|
|
<script type="text/javascript"> $('#Image3').click(function(){ $('#Shocked').imgExplosion({ start:'top', angle:false, alternate:false, inPlace:false, rot:false, interval:200, explode:false, num:200 }); }); </script> |
Разберём параметры:
start:'top', - откуда будут выпадать изображения (top, bottom). Работает лишь в случае значения false остальных параметров
angle:false, - вертикальное хаотичное выпадение (снизу и сверху)
alternate:false, - хаотичное выпадание со всех сторон
inPlace:false, - появляются и пропадают в разных местах (Без вылета)
rot:false, - вращать ли картинку
interval:200, - интервал между появлениями картинок (В миллисекундах)
explode:false, - применять ли эффект взрыва
num:200 - количество вылетающих элементов (После вылета всех элементов анимация прекращается)
3#: Следующий код в то место, где будет располагаться кнопка запуска анимации:
|
|
<img id="Shocked" src="Ссылка на картинку" width="50" /> <button id="Image3">Запуск анимации</button> |
Ну вот и всё. Даже при небольших знаниях jQuery вы сможете привязать анимацию к нужным вам событиям (Пришло новое личное сообщение, комментарий успешно добавлен и т.д.)
Осталось лишь залить два JS файла из прикреплённого архива в папку
js. Также я прикрепил все изображения из примера - кому-нибудь они могут пригодиться
Автор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
