Анимированные часы на jQuery
Скрипты
Анимированные часы на jQueryПредлагаю несложный скрипт анимированных часиков на сайт. Эти часы выглядят так, как будто сделаны на флеш. Скрипт часов функционирует на основе пакета jQuery. Для него созданы несколько внешних видов. Стиль анимации не меняется.
Для того, чтобы скрипт анимированных часов заработал, вам нужно будет подключить jQuery на сайт. Прежде чем подключать jQuery, убедитесь, что он уже не подключен на вашем сайте. Тем, чьи сайты на основе системы UCOZ, jQuery подключать не нужно.
Для подключения jQuery на сайт нужно в теле HEAD прописать следующий код:
Теперь, будем ставить сам скрипт анимированных часов. Для этого нужно разместить следущий код в том месте страницы, где должны отображаться часы:
Чтобы увидеть их включите выполнение JavaScript в браузере. </noscript> </div>
<script type="text/javascript" src="http://szenprogs.ru/scripts/clock2/spclock2.js"></script>
<script type="text/javascript"><!--
$(function(){
$spclock2.img = 'http://szenprogs.ru/scripts/clock2/nums_green_18x30_seg.gif';
$spclock2.width = 18;
$spclock2.height = 30;
$spclock2.ready();
});
// -->
</script>
Скрипт анимированных часов использует следующие параметры:
- $spclock2.width - ширина одной цифры. Ширина должна совпадать с шириной рисунка с цифрами.
- $spclock2.height - высота одной цифры. Высота должна совпадать с высотой одной цифры на рисунке.
- $spclock2.img - рисунок с цифрами. Рисунок выполнен в виде спрайтов с рисунком цифр от 0 до 9, и заканчивается разделителем.
Рисунки можно использовать любые из предложенных ниже, или создать свой. Список существующих рисунков цифр для анимированных часов (для просмотра внешнего вида просто перейдите по ссылке):
- Черный 18x30
- Черный плоский 18x30
- Черный сегмент 18x30
- Черный 9x15
- Черный сегмент 9x15
- Синий 18x30
- Синий плоский 18x30
- Синий сегмент 18x30
- Синий 9x15
- Синий сегмент 9x15
- Зеленый 18x30
- Зеленый плоский 18x30
- Зеленый сегмент 18x30
- Зеленый 9x15
- Зеленый сегмент 9x15
- Красный 18x30
- Красный плоский 18x30
- Красный сегмент 18x30
- Красный 9x15
- Красный сегмент 9x15
- Белый 18x30
- Белый плоский 18x30
- Белый сегмент 18x30
- Белый 9x15
- Белый сегмент 9x15
- Желтый 18x30
- Желтый плоский 18x30
- Желтый сегмент 18x30
- Желтый 9x15
- Желтый сегмент 9x15
Скрипт вы можете скопировать на свой сайт. Для этого скачайте следующий архив: clock_2.rar. Содержимое архива распакуйте и залейте распакованные файлы на свой хост. После этого, замените ссылки в коде запуска на свои.
Рабочий пример анимированных часов:
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Анимированные часы на jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 15347 |
| Рейтинг: | 4.1/33 |
| Дата добавления: | 2011-03-10 11:40, Четверг |
| Добавил: | Szen |
| Теги: | часики, АНИМИРОВАННЫЕ, часы |
Рекомендуем
Дополнительно к Анимированные часы на jQuery
Мини-форум
| № 0 | 2011-03-10 11:40 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Анимированные часы на jQuery". |
| Гость |
