jClock – Kocaman bir analog saat uygulaması

Daha önceleri tutorialport sitesi tarafından hazırlanmış olan bir kaç örnek paylaşmıştık sizlerle. Öncedende belirttiğimiz gibi tutorialport sitesi artık yok yada isim değiştirmişte olabilirler ama tam olarak iletişim kurabileceğim bir bağlantı bulamadım. Tutorialport sitesi tarafından hazırlanmış olan güzelim eklentileri de yayınlamamak kötü olurdu. Mutlaka eski tutorialport sitesini arayan kişilerde vardır. Tutorialport sitesi tarafından hazırlanmış olan örnekler elime ulaştıkça sizlerle paylaşmaya devam edicem.

Bugün paylaştığımız jQueryClock yani analog saat uygulaması öyle mükemmel kullanışlı diyebileceğim bir saat türü değil. Css3 geçişler ve dönüşümler kullanılarak hazırlanılmış olan bu analog saat örneği için kısa yoldan saat boyutunu değiştirebileceğiniz bir özellik bulunmuyor. Ama resimleri küçültüp ve css kodlar içindeki değerleri de değiştirip daha küçük bir şekilde kullanabilirsiniz. Biraz zahmetli bir işe benziyor. Siz yinede arşivinizde bulundurun. Gün gelir ihtiyacınız olur. Belki düzenleyip sitenize bu tarz analog saat eklemek istersiniz.

Download

Demo

Kullanım

Js dosya adresleri :

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="js/script.js"></script>

Css :

#clock
{
	position: relative;
	width: 600px;
	height: 600px;
	list-style: none;
	margin: 20px auto;
	background: url('../images/clock.png') no-repeat center;

}
#seconds,
#minutes,
#hours
{
	position: absolute;
	width: 30px;
	height: 580px;
	left: 270px;
}
#date
{
	text-shadow:1px 2px 1px #000;
	position: absolute;
	top: 365px;
	color:#fff;
	right: 140px;
	font:30px/36px Acens;
	font-weight:bold;
	letter-spacing:3px;
}
#hours
{
	background: url('../images/hands.png') no-repeat left;
	z-index: 1000;
}
#minutes
{
	background: url('../images/hands.png') no-repeat center;
	width:25px;
	z-index: 2000;
}

#seconds
{
	background: url('../images/hands.png') no-repeat right;
	z-index: 3000;
}

Not : Body etiketleri arasına eklemeniz gereken herhangi bir html kod bulunmuyor. Sadece css, jQuery ve jqueryClock dosya adreslerini eklemeniz yeterli.