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

Опубликовал 10.08.2010 в рубрике mootools | 2 комментария(ев)

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

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Всем привет! Сегодня мы рассмотрим анимированные часы, которые работают на скрипте Mootools. Часы выглядят очень красиво, особенно если Ваш сайт раскрашен в темных тонах. Я не стану зацикливаться на самих скриптах, я в них не особо разбираюсь. Поэтому строить из себя программера не хочу.

Я не стану писать здесь пример скрипта Mootools – он очень огромный. Да и нужны рассматривать его нет. Он нам понадобится только при подключении к нашей странице. В совокупности нам необходимо внедрить в <head> следующие скрипты и стиль:

Пропишем все необходимое в шапке

<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="mootools.js" type="text/javascript"></script>
<script src="animate.js" type="text/javascript"></script>

CSS-код выглядит следующим образом:

styles.css

#wrapper{
	position:absolute;
	margin-left: auto;
    margin-right: auto;
}

#front{
	position:absolute;
	top:0px;
}

#upperHalf, #upperHalfBack{
	vertical-align:bottom;
}

#lowerHalf, #lowerHalfBack{
	vertical-align:top;
}

#upperHalf img{
	position:relative;
	height:64px;
	vertical-align:bottom;
	visibility:visible;
}

#lowerHalf img{
	position:relative;
	height:64px;
	vertical-align:top;
	visibility:visible;
}

#lowerHalfBack img{
	position:relative;
	vertical-align:top;
}

#upperHalfBack img{
	position:relative;
	vertical-align:bottom;
}

#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack{
	width:125px;
}

#minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight,
#minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack,
#secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight,
#secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack{
	width:64px;
}

Теперь нам необходимо обработать <body>. Для этого нам нужно вставить в тело документа данный html-код:

Пропишем все необходимое в шапке

<div id="wrapper">
	<div id="back">
         <div id="upperHalfBack">

         </div>
         <div id="lowerHalfBack">

         </div>
	</div>

    <div id="front">
         <div id="upperHalf">

         </div>
         <div id="lowerHalf">

         </div>
	</div>
</div>

Я не знаю, что еще здесь можно рассказать интересного. Думаю … ничего. Часы как часы. Если они кому нужны, то разбираться в скриптах – это уже дело второе. Для меня было важно – показать как можно вставить на сайт этот превосходный clock.

Информация о загрузках

Анимированные часы на Mootools (189.0 KB, 41 скачиваний)
Файл залит 10.08.2010 в 19:06

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация