Creative jQuery Sliding Clock
File Size: | 43.2 KB |
---|---|
Views Total: | 1931 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A jQuery Plugin for creating creative transpearant Slider clock with CSS sprites.
Usage:
1. The CSS
<style type="text/css"> body { background: #bae1ea url(back.jpg) 50% 0px no-repeat; color: #000; } /* container for clock */ #wrap { position: relative; margin: 100px auto 0; width: 700px; height: 440px; background: url("slider clock(trans).png") no-repeat top left; border-style: solid; border-width: 1px; overflow: hidden; } /* style background and size of all sliding divs */ #wrap div { position: absolute; margin-left: -700px; width: 1400px; height: 40px; background: url("slider clock(trans).png") repeat-x; } /* specific position and background position for sliding divs */ #wrap #day { top: 40px; background-position: 0 -440px; } #wrap #month { top: 120px; background-position: 0 -480px; } #wrap #date { top: 200px; background-position: 0 -520px; } #wrap #hour { top: 280px; background-position: 0 -560px; } #wrap #min { top: 320px; background-position: 0 -600px; } #wrap #sec { top: 400px; background-position: 0 -640px; } #title { margin: 20px auto; width: 550px; text-align: center; } #other { margin: 10px auto; width: 550px; text-align: center; } </style>
2. Include jQuery Library
<script type="text/javascript" src="jquery.js"> </script>
3. Call the function
<script> $(document).ready(function(){ function checktime(olddel){ var now = new Date(); var nowdel = now.getDay() + "|" + now.getMonth() + "|" + now.getDate() + "|" + now.getHours() + "|" + now.getMinutes() + "|" + now.getSeconds(); if ( olddel != nowdel ) { var oldsplit = olddel.split("|"); var nowsplit = nowdel.split("|"); if ( oldsplit[5] != nowsplit[5] ) { clock_slide('#sec',nowsplit[5],11); if ( oldsplit[4] != nowsplit[4] ) { clock_slide('#min',nowsplit[4],11); if ( oldsplit[3] != nowsplit[3] ) { clock_slide('#hour',nowsplit[3],28); if ( oldsplit[2] != nowsplit[2] ) { clock_slide('#day',nowsplit[0],100); clock_slide('#date',(nowsplit[2]-1),22); if ( oldsplit[1] != nowsplit[1] ) { clock_slide('#month',nowsplit[1],57); }; }; }; }; }; }; function clock_slide(which,howmuch,multiple){ $(which).stop().animate({marginLeft: ((howmuch*multiple)-700)+'px'}, 250, 'linear'); }; setTimeout(function(){checktime(nowdel);}, 250); }; checktime("0|0|0|0|0|0"); }); </script>
4. Markup
<div id="wrap"> <div id="day" style="margin-left: -500px;"> </div> <div id="month"> </div> <div id="date" style="margin-left: -392px;"> </div> <div id="hour" style="margin-left: -420px;"> </div> <div id="min" style="margin-left: -447px;"> </div> <div id="sec" style="margin-left: -568px;"> </div> </div>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.