В этой статье, мы расскажем вам, как создать красочные и анимированные jQuery/CSS часы в стиле “Halo”, которые помогут вам следить за драгоценным временем.
Демо Скачать урок
Шаг 1 – XHTML
Как обычно, мы начинаем с разметки XHTML. Хитрость состоит в том, что XHTML не содержится в demo.html, но динамически вставляется в страницу с помощью jQuery.
Это избавляет нас от необходимости вручную вводить блоки кода для каждого из циферблатов (их у нас три: для часов, минут и секунд). В этом разборе кода мы будем предполагать, что дисплеи у наших часов будут трех разных цветов, но в демо-версии я упростил все до одного цвета. Просто мне так больше нравится! ))
Давайте взглянем на XHTML, который вставляется jQuery:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!-- Первый класс (зеленый в данном случае) выделяется динамически -->
<div class="green clock"</div>
<!-- Этот div хранит значение единиц, - секунд, минут или часов -->
<div class="display"></div>
<!-- Черная область, которая скрывает основной фон -->
<div class="front left"></div>
<!-- Левая часть фона: -->
<div class="rotate left">
<div class="bg left"></div>
</div>
<!-- Правая часть фона: -->
<div class="rotate right">
<div class="bg right"><div id="fcbg"></div></div>
</div>
</div>
|
Этот код содержится в jquery.tzineClock / jquery.tzineClock.js. Он генерируется три раза: первый для часов, второй для минут, и третий для секунд. Затем, они анимируются и обновляются каждую секунду.
Существуют три класса, которые присваиваются самому верхнему контейнеру в процессе генерации – зеленый, синий и красный. Мы меняем цвет циферблата путем присвоения того или инного класса.
Переходим к следующему шагу…
Шаг 2 – CSS
Прежде, чем наши стили будут иметь какое либо влияние на страницу, мы должны включить их в head часть нашего файла:
demo.html
|
1
2
|
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />
|
Эти строки кода, импортируют styles.css и jquery.tzineClock.css на страницу. Первый, стилизует демо страницу, а второй, красочные циферблаты (они являются частью плагина).
Теперь мы можем более внимательно взглянуть на правила CSS:
styles.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Простой сброс страницы */
margin:0;
padding:0;
}
body{
/* Установка по умолчанию цвет текста, фона и шрифта */
color:#fff;
font-size:13px;
background: #222;
font-family:Arial, Helvetica, sans-serif;
}
#fancyClock{
height:200px;
width:600px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -300px;
}
|
Это все, что необходимо для стилизации демо страницы. Сначала, мы делаем простой сброс CSS, который будет гарантировать, что элементы на странице выглядят одинаково в разных браузерах.
Затем, мы стилизуем body страницы и fancyClock div, в который, мы позже вставим три циферблата. Также центрируем его на экране за счет абсолютной позиции и смещения величины margin.
jquery.tzineClock.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
.clock{
/* .clock div Динамически создан jQuery */
background-color:#222;
height:200px;
width:200px;
position:relative;
overflow:hidden;
float:left;
}
.clock .rotate{
/* Есть два .rotate divs - один для каждый половины фона-подложки */
position:absolute;
width:200px;
height:200px;
top:0;
left:0;
}
.rotate.right{
display:none;
z-index:11;
}
.clock .bg, .clock .front{
width:100px;
height:200px;
background-color:#222;
position:absolute;
top:0;
}
.clock .display{
/* Содержит число секунд, минут или часов */
position:absolute;
width:200px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:60px;
text-align:center;
top:65px;
left:0;
/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}
/* Левая часть бэкграунда */
.clock .bg.left{ left:0; }
/* Индивидуальная стилизация каждого цвета : */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(img/bg_blue.png) no-repeat left top; }
/* Правая часть бэкграунда */
.clock .bg.right{ left:100px; }
.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }
.clock .front.left{
left:0;
z-index:10;
}
#fcbg{ background:url(img/bg_grey.png) repeat-x; width:600px;height:200px;z-index:11;position:absolute;}
|
jquery.tzineClock.css является частью нашего плагина (наряду c jquery.tzineClock.js) и он стилизирует красочные циферблаты . Контейнер #fcbg является нашей подложкой под циферблаты и показывает границы циферблата.
Одним из наиболее интересных моментов, является использование отдельных правил для стилизации цвета циферблатов.
Подробней об анимации, можно узнать из изображения ниже:
Иллюстрация анимации
Шаг 3 – jQuery
Перенос всего JavaScript в плагин делает очень легким повторное использование кода, и в то же время позволяет нам использовать возможности jQuery селекторов и методов.
Чтобы была возможность использовать jQuery библиотеку, мы сначала должны, включить пару скриптов в страницу:
demo.html
|
1
2
3
|
|
Первым файлом, является сама библиотека, включена из Google CDN. Затем, у нас есть плагин и скрипт-файл, который запускает демо.
script.js
|
1
2
3
4
5
6
|
$(document).ready(function(){
/* Этот код выполняется после того, как DOM был полностью загружен */
$('#fancyClock').tzineClock();
});
|
Давайте копнём немного глубже в плагин:
jquery.tzineClock.js – Часть 1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
(function($){
// Глобальный объект используемый функцией плагина:
var gVars = {};
// Продление основы jQuery:
$.fn.tzineClock = function(opts){
// "this" содержит элементы, которые были выбраны при вызове плагина: $('elements').tzineClock();
// Если селектор вернул более одного элемента, мы используем первый:
var container = this.eq(0);
if(!container)
{
try{
console.log("Invalid selector!");
} catch(e){}
return false;
}
if(!opts) opts = {};
var defaults = {
/* Дополнительные опции будут добавлены в будущих версиях плагина. */
};
/* Слияние предоставленых параметров с параметрами по умолчанию, (будет использоваться в будущих версиях плагина): */
$.each(defaults,function(k,v){
opts[k] = opts[k] || defaults[k];
});
// Вызов функции setUp и передача container,
// будет доступна для setUp функции, как "this":
setUp.call(container);
return this;
}
function setUp()
{
// Цвета циферблата:
var colors = ['orange','blue','green'];
var tmp;
for(var i=0;i<3;i++)
{
// Создание нового элемента и установка цвета, как имя класса:
tmp = $('
').attr('class',colors[i]+' clock').html(
''+
''+
'
'+
''+
' '+
'
'+
''+
' '
);
// Присоединение к fancyClock контейнеру:
$(this).append(tmp);
// Назначение некоторых элементов как переменных, для скорости:
tmp.rotateLeft = tmp.find('.rotate.left');
tmp.rotateRight = tmp.find('.rotate.right');
tmp.display = tmp.find('.display');
// Добавление циферблата, как глобальной переменной. Будет доступна в качестве gVars.colorName
gVars[colors[i]] = tmp;
}
//Настройка интервала, выполняемого каждые 1000 миллисекунд:
setInterval(function(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
animation(gVars.green, s, 60);
animation(gVars.blue, m, 60);
animation(gVars.orange, h, 24);
},1000);
}
|
Создание плагина для jQuery сводится к определению пользовательской функцию с помощью метода jQuery.fn. Таким образом, ваша функция доступна на любых элементах, которые вы обычно используете на jQuery.
Например, в script.js, мы выбираем div ширину id fancyClock и используем tzineClock () метод: $ (‘# FancyClock’) tzineClock ();. Элементы, которые мы выбрали, позже передаются tzineClock функции и доступны через “this” свойство.
Поскольку, там может быть выбран более чем один элемент, мы извлекаем только первый из множества с помощью eq(0) метода. Позже, у нас есть setUp() функция, которая вставляет разметки для циферблатов и настраивает интервал, который будет обновлять цифры каждую секунду.
jquery.tzineClock.js – Часть 2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
function animation(clock, current, total)
{
// Расчет текущего угла:
var angle = (360/total)*(current);
var element;
if(current==0)
{
//Скрытие правой половины background:
clock.rotateRight.hide();
// Сброс вращения левой части:
rotateElement(clock.rotateLeft,0);
}
if(angle<=180)
{
// Левая часть вращается, а правая, в настоящее время, скрыта:
element = clock.rotateLeft;
}
else
{
// Первая часть вращения завершен, поэтому начинает вращаться правая часть:
clock.rotateRight.show();
clock.rotateLeft.show();
rotateElement(clock.rotateLeft,180);
element = clock.rotateRight;
angle = angle-180;
}
rotateElement(element,angle);
// Настройка текста внутри элемента, вставки нуля, если необходимо:
clock.display.html(current<10?'0'+current:current);
}
function rotateElement(element,angle)
{
// Вращение элемента, в зависимости от браузера:
var rotate = 'rotate('+angle+'deg)';
if(element.css('MozTransform')!=undefined)
element.css('MozTransform',rotate);
else if(element.css('WebkitTransform')!=undefined)
element.css('WebkitTransform',rotate);
// Версия для Internet Explorer с помощью фильтров, работает, но немного с баггами:
else if(element.css("filter")!=undefined)
{
var cos = Math.cos(Math.PI * 2 / 360 * angle);
var sin = Math.sin(Math.PI * 2 / 360 * angle);
element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
element.css("left",-Math.floor((element.width()-200)/2));
element.css("top",-Math.floor((element.height()-200)/2));
}
}
})(jQuery)
|
Последние две функции, используемые плагином, это animation и rotateElement. Первая функция обновляет циферблат, в соответствии с переданными значениями (мы также передаем параметр с максимальным значением, для того, чтобы функция могла вычислить вращение).
Вторая функция – вращает переданный элемент. Вращение работает только для Firefox, Safari, Chrome и IE6 +. Internet Explorer не поддерживает CSS3 rotation, используемый другими браузерами, но предоставляет фильтр, который позволяет сделать подобное преобразование.
На этом, наши красочные часы jQuery готовы!
Демо Скачать урок
Источник
