首页>>Jquery图片>>漂亮的走动的时间(2014-04-18)

漂亮的走动的时间

漂亮的走动的时间
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrap"> <img id="hourl" class="time" src="nums2.png" /> <img id="hourr" class="time" src="nums10.png" /> <img class="time" src="colon.png" /> <img id="minl" class="time" src="nums6.png" /> <img id="minr" class="time" src="nums10.png" /> <img class="time" src="colon.png" /> <img id="secl" class="time" src="nums6.png" /> <img id="secr" class="time" src="nums10.png" />  
  2. <div style="clear:left;"> </div>  
  3. <div id="cover"> </div>  
  4. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3.   $(document).ready(function(){  
  4.   
  5.     $('#wrap').animate({opacity: 0.0}, 0);  
  6.       
  7.     function middle(){  
  8.   
  9.       wrapTop = ($(window).height() - $('#wrap').height())/2;  
  10.       wrapLeft = ($(window).width() - $('#wrap').width())/2;  
  11.   
  12.       $('#wrap').animate({marginTop: wrapTop, marginLeft: wrapLeft}, 500);  
  13.   
  14.     };  
  15.   
  16.       middle();  
  17.   
  18.       $(window).bind('resize', middle);  
  19.   
  20.     function checktime(prevhour,prevmins,prevsecs){  
  21.   
  22.       var now = new Date();  
  23.   
  24.       var hour = now.getHours();  
  25.       if(hour < 10) hour = "0" + hour;  
  26.   
  27.       var mins = now.getMinutes();  
  28.       if(mins < 10) mins = "0" + mins;  
  29.   
  30.     var secs = now.getSeconds();  
  31.     if(secs < 10) secs = "0" + secs;    
  32.   
  33.       var hour = hour + "";  
  34.       var mins = mins + "";  
  35.     var secs = secs + "";  
  36.   
  37.       if(prevhour != hour) {  
  38.   
  39.         var prevhour = prevhour + ""  
  40.         var hoursplit = hour.split("");  
  41.         var prevhoursplit = prevhour.split("");  
  42.   
  43.         if(prevhoursplit[0] != hoursplit[0]) numberflip('#hourl',hoursplit[0]);  
  44.         if(prevhoursplit[1] != hoursplit[1]) numberflip('#hourr',hoursplit[1]);  
  45.   
  46.       };  
  47.   
  48.       if(prevmins != mins) {  
  49.   
  50.         var prevmins = prevmins + ""  
  51.         var minsplit = mins.split("");  
  52.         var prevminsplit = prevmins.split("");  
  53.   
  54.         if(prevminsplit[0] != minsplit[0]) numberflip('#minl',minsplit[0]);  
  55.         if(prevminsplit[1] != minsplit[1]) numberflip('#minr',minsplit[1]);  
  56.   
  57.       };  
  58.   
  59.       if(prevsecs != secs) {  
  60.   
  61.         var prevsecs = prevsecs + ""  
  62.         var secsplit = secs.split("");  
  63.         var prevsecsplit = prevsecs.split("");  
  64.   
  65.         if(prevsecsplit[0] != secsplit[0]) numberflip('#secl',secsplit[0]);  
  66.         if(prevsecsplit[1] != secsplit[1]) numberflip('#secr',secsplit[1]);  
  67.   
  68.       };  
  69.   
  70.   
  71.   
  72.       function numberflip(which,number){  
  73.   
  74.         if(number != 0) $(which).animate({marginTop: '-'+parseInt((number*140),10)+'px'}, 250, 'linear');  
  75.   
  76.         if(number == 0) {  
  77.   
  78.               var getmargin = parseInt(($(which).css('margin-top')), 10);  
  79.   
  80.               $(which).animate({marginTop: parseInt((getmargin-140),10)+'px'}, 250, 'linear', function(){  
  81.                 $(this).css("margin-top","0px")  
  82.           });  
  83.   
  84.             };  
  85.   
  86.       };  
  87.   
  88.       setTimeout(function(){checktime(hour,mins,secs);}, 200);  
  89.   
  90.     };  
  91.   
  92.     checktime(00,00,00);  
  93.   
  94.     $('#wrap').animate({opacity: 1.0}, 1000);  
  95.   
  96.   });  
  97.   
  98.   
  99.   
  100. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_304.html