Главная » Файлы » Прочие скрипты » jQuery

Различные летающие картинки на вашем сайте через плагин jquery.imgExplosion на jQuery для uCoz
23.06.14, 14:20:13

Скачать файл




Сейчас набрёл на один очень интересный плагин и решил выложить его и разжевать все настройки и функционал

Для начала посмотрите ДЕМО

Установка:

В самый низ после тега /body на нужных страницах вставляйте:
Код
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>  
  <script src="http://atomantic.github.com/jquery.imgExplosion/jquery.imgexplosion.js"></script>


Сразу после предыдущего кода вставляйте это:
Код
<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 - количество вылетающих элементов (После вылета всех элементов анимация прекращается)

Следующий код в то место, где будет располагаться кнопка запуска анимации:
Код
<img id="Shocked" src="Ссылка на картинку" width="50" />
  <button id="Image3">Запуск анимации</button>


Ну вот и всё. Даже при небольших знаниях jQuery вы сможете привязать анимацию к нужным вам событиям (Пришло новое личное сообщение, комментарий успешно добавлен и т.д.)

Осталось лишь залить два скрипта из прикреплённого архива в папку js. Также я прикрепил все изображения примера - кому-нибудь они могут пригодиться

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: сайте, Через, Летающие, плагин, на, вашем, различные, картинки, jquery.imgExplosion
Просмотров: 367 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: