Анимированные часы на jQuery

Скрипты

Рисунок Анимированные часы на jQuery
Анимированные часы на jQuery Анимированные часы на jQuery
оценка: 4.1 из 5
оценок: 33

Предлагаю несложный скрипт анимированных часиков на сайт. Эти часы выглядят так, как будто сделаны на флеш. Скрипт часов функционирует на основе пакета jQuery. Для него созданы несколько внешних видов. Стиль анимации не меняется.

Для того, чтобы скрипт анимированных часов заработал, вам нужно будет подключить jQuery на сайт. Прежде чем подключать jQuery, убедитесь, что он уже не подключен на вашем сайте. Тем, чьи сайты на основе системы UCOZ, jQuery подключать не нужно.

Для подключения jQuery на сайт нужно в теле HEAD прописать следующий код:

Code
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Теперь, будем ставить сам скрипт анимированных часов. Для этого нужно разместить следущий код в том месте страницы, где должны отображаться часы:

Code
<div id="idspclock2" style="text-align:center;">   <noscript>     Тут размещены анимированные часики на jQuery от <a href="http://szenprogs.ru/blog/animirovannye_chasy_na_jquery/2011-03-10-95" target="_blank" title="Часики, скрипт часы, часы на сайт, часы jQuery, анимированные часы">SzenProgs.ru</a>.<br>
    Чтобы увидеть их включите выполнение 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, и заканчивается разделителем.

Рисунки можно использовать любые из предложенных ниже, или создать свой. Список существующих рисунков цифр для анимированных часов (для просмотра внешнего вида просто перейдите по ссылке):

Скрипт вы можете скопировать на свой сайт. Для этого скачайте следующий архив: clock_2.rar. Содержимое архива распакуйте и залейте распакованные файлы на свой хост. После этого, замените ссылки в коде запуска на свои.

Рабочий пример анимированных часов:





На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Анимированные часы на jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:9899
Рейтинг:4.1/33
Дата добавления:2011-03-10 11:40, Четверг
Добавил:Szen
Теги:Часики, Анимированные, часы

Мини-форум

№ 02011-03-10 11:40
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Анимированные часы на jQuery".
Гость
Учавствовать в обсуждении "Анимированные часы на jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 124
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 6
Гостей: 6
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz