» » Гарний цифровий годинник з ефектом перегортання на jQuery

Гарний цифровий годинник з ефектом перегортання на jQuery

Дуже цікаві годинник, який можна поставити на сайт. Годинники працюють за допомогою mootools.js , гортаючи картинки з цифрами. Виглядає дуже стильно і креативно. Годинники з функцією показу часу доби (AM / PM).
Гарний цифровий годинник з ефектом перегортання на jQuery


Даний годинник нормально відображається у всіх сучасних браузерах. Їх можна поставити на сайт новинного порталу або якого небудь форуму, для того, щоб відвідувачі сайту завжди знали скільки зараз час. Дуже зручно, коли стоять годинник на якому-небудь сервісі букмекерської контори або тоталізатора. Цей скрипт можна використовувати і в інших областях, наприклад, якщо його трохи допив, то можна переробити ці години в плагін зворотного відліку часу.

Установка на сайт:

1. Розпакувати архів в корінь сайту через FTP-менеджер

2. Прописати на всіх сторінках сайту, де працюватимуть ці години в блоці наступний код:

<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>



Завантажити безкоштовно


scripts
827 07.02.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру