Красивые цифровые часы для сайта c эффектом перелистывания на jQuery
Очень интересные часы, которые можно поставить на сайт. Часы работают с помощью mootools.js, перелистывая картинки с цифрами. Смотрится очень стильно и креативно. Часы в двенадцатиричной системе с функцией показа времени суток (AM/PM).
Данные часы нормально отображаются во всех современных браузерах. Их можно поставить на сайт новостного портала или какого нибудь форума, для того, чтобы посетители сайта всегда знали сколько сейчас время. Очень удобно, когда стоят часы на каком нибудь сервисе букмекерской конторы или тотализатора. Этот скрипт можно использовать и в других областях, например, если его немного допилить, то можно переделать эти часы в плагин обратного отсчета времени. В общем, смотрите "демо", качайте и пользуйтесь на здоровье!
Установка на сайт:
1. Распаковать архив в корень сайта через FTP-менеджер
2. Прописать на всех страницах сайта, где будут работать эти часы в блоке <head></head> следующий код:
<link rel="stylesheet" type="text/css" href="style.css" /> <script src="mootools.js" type="text/javascript"></script> <script src="animate.js" type="text/javascript"></script>
3. Туда, куда вы хотите расположить часы, нужно вставить html код:
<div id="back"> <div id="upperHalfBack"> <img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png"/> <img id="minutesUpLeftBack" src="Double/Up/Left/0.png" class="asd" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png"/> <img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png"/> </div> <div id="lowerHalfBack"> <img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" /> <img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" /> <img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" /> </div> </div> <div id="front"> <div id="upperHalf"> <img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png"/> <img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png"/> <img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png"/> </div> <div id="lowerHalf"> <img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/> <img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" /> <img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" /> </div> </div>
*Для начинающих web-разработчиков: css файл под названием style.css скорее всего нужно будет переименовать, допустим, в clock.css и поменять так же строку
<link rel="stylesheet" type="text/css" href="style.css" />
на
<link rel="stylesheet" type="text/css" href="clock.css" />
Наверняка у вас часы встанут не так, как вам нужно. Все отступы, размеры и так далее вы сможете поменять в css файле style.css (или наш переименованный clock.css). Удачи в начинаниях!
Комментарии ()