CSS3 创意圆形指针时钟jQuery特效代码

创客云

代码结构

  1. <link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>
  2. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  3. <div id="clock">
  4.   <div id="hour" style="transform: rotate(56deg);"><img src="hour.png"></div>
  5.   <div id="minute" style="transform: rotate(312deg);"><img src="minute.png"></div>
  6.   <div id="second" style="transform: rotate(6deg);"><img src="second.png"></div>
  7. </div>
  8. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
  9. <script type="text/javascript">function Clock_dg(prop) {
  10.     var angle = 360/60,
  11.         date = new Date();
  12.         var h = date.getHours();
  13.         if(h > 12) {
  14.             h = h - 12;
  15.         }
  16.         hour = h;
  17.         minute = date.getMinutes(),
  18.         second = date.getSeconds(),
  19.         hourAngle = (360/12) * hour + (360/(12*60)) * minute;
  20.         $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
  21.         $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
  22.         $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
  23.               $('#clock').addClass('clock'+h);
  24. }
  25. $(function(){        
  26.     var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
  27.         prop,
  28.         el = document.createElement('div');
  29.     for(var i = 0, l = props.length; i < l; i++) {
  30.         if(typeof el.style[props[i]] !== "undefined") {
  31.             prop = props[i];
  32.             break;
  33.         }
  34.     }
  35.     setInterval(function(){
  36.         Clock_dg(prop)
  37.     },100);
  38. });
  39. </script>
  40. <div style="text-align:center;margin:-80px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  41. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60084.html
云模板

发表评论