|
2011-12-24Дата: Суббота, 24.12.2011, 20:43 | Сообщение # 1 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Неплохой плагин для создания на сайте эффекта падающих объектов, типа снежинок, листочков, цифкерок и тп. - jQuery плагин «jSnow»
Очень прост в использовании.
Требует подключённой библиотеки jQuery. (У сайтов на юКоз она подключена по умолчанию!)
1. Подключение плагина:
Подключается добавлением в ссылки на скрипт, в виде:
Code <script type="text/javascript" src="/_example/jquery/jSnow/jsnow.js"></script>
2. Инициализация скрипта jSnow
JavaScript - код для вставки:
Code <script type="text/javascript">
$(document).ready(function(){
$().jSnow({
flakes:15,
flakeMaxSize:30,
flakeMinSize:20,
flakeCode:[
"/_example/bg/leaf/leaf__1.gif",
"/_example/bg/leaf/leaf__2.gif",
"/_example/bg/leaf/leaf__3.gif",
"/_example/bg/leaf/leaf__4.gif",
"/_example/bg/leaf/leaf__5.gif"
],
interval:30
});
});
</script>
Где:
- flakes:15 - количество одновременных объектов на странице (по умолчанию используется 30).
- flakeCode:["",""] - массив ссылок на объекты, через запятую (если используются изображения).
Поддерживаются форматы GIF и PNG.
- interval:30 - Управление интервалом анимации. Значение по умолчанию 50 - означает, что анимация цикл будет выполняться каждые 50 мс (20 раз в секунду, с 1 сек = 1000 миллисекунд)
...
☑ Пример 1 (jQuery плагин «jSnow» - падающие листочки)
...
Кроме того, плагин позволяет устанавливать не только изображения для объектов, но и HTML код, например спец. символы:
JavaScript - код для вставки:
Code <script type="text/javascript">
$(document).ready(function(){
$().jSnow({
flakes:15,
flakeMaxSize:30,
flakeMinSize:20,
flakeCode:[
"♠",
"♣",
"♥",
"♦",
"○"
],
flakeColor:["#f00","#00f","#fff"],
interval:30
});
});
</script>
Где:
- flakeMaxSize:30 - Максимальный размер шрифта символа.
- flakeMinSize:20 - Минимальный размер шрифта символа.
(Оба эти параметры будут игнорироваться в случае, если вы установили изображения для объектов)
- flakeColor:["#f00","#00f","#fff"] - массив цветов, которые будут применяться к символам.
- Остальные параметры - те же, что и к изображениям, то бишь,
- flakes:15 - количество одновременных объектов на странице (по умолчанию используется 30).
- interval:30 - Управление интервалом анимации.
» Таблица специальных символов (HTML 4.0)
...
☑ Пример 2 (jQuery плагин «jSnow» - падающие спец. символы)
...
Как и написано выше, плагин позволяет устанавливать не только изображения для объектов, но и HTML код, например HTML-код картинок или любой другой код:
JavaScript - код для вставки:
Code <script type="text/javascript"> $(document).ready(function(){ $().jSnow({ flakes:15, flakeCode:[ '<img src="/_example/_img/_anime/_01_800x600.jpg" width="100"/>', '<img src="/_example/_img/_anime/_02_800x600.jpg" width="100" />', '<img src="/_example/_img/_anime/_03_800x600.jpg" width="100" />', '<img src="/_example/_img/_anime/_04_800x600.jpg" width="100" />', '<img src="/_example/_img/_anime/_05_800x600.jpg" width="100" />', '<img src="/_example/_img/_anime/_06_800x600.jpg" width="100" />' ], interval:40 }); }); </script>
Где:
- Установочные параметры описаны выше
...
☑ Пример 3 (jQuery плагин «jSnow» - падающие произвольные HTML-объекты)
...
P.S. Скрипт плагина «jSnow» в прикреплении, или по ссылке jQuery jSnow.
Поддерживаются браузеры: IE6+, Opera, Safari, Firefox и Chrome
...
| | |
|
