搜索

首页 >web前端 >js教程 >js时钟翻牌效果实现代码分享_javascript技巧

js时钟翻牌效果实现代码分享_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原创
2016-05-16 15:44:531624浏览

先给大家上运行效果图，看看是不是特别棒！

这一张是小编抓拍时钟翻牌时的效果图：

为大家分享的JavaScript时钟翻牌效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create an Animated Flip Down Clock</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">

 <div id="back">
  <div id="upperHalfBack">
  <img  src="/static/imghwm/default1.png"  data-src="spacer.png"  class="lazy" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Single/Up/AM/0.png"  class="lazy"  id="hoursUpBack"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  class="asd lazy"  src="/static/imghwm/default1.png"  data-src="Double/Up/Left/0.png"  id="minutesUpLeftBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Up/Right/0.png"  class="lazy"  id="minutesUpRightBack"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Up/Left/0.png"  class="lazy"  id="secondsUpLeftBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Up/Right/0.png"  class="lazy"  id="secondsUpRightBack"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  </div>
  <div id="lowerHalfBack">
  <img  src="/static/imghwm/default1.png"  data-src="spacer.png"  class="lazy" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Single/Down/AM/0.png"  class="lazy"  id="hoursDownBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Down/Left/0.png"  class="lazy"  id="minutesDownLeftBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Down/Right/0.png"  class="lazy"  id="minutesDownRightBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Down/Left/0.png"  class="lazy"  id="secondsDownLeftBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Down/Right/0.png"  class="lazy"  id="secondsDownRightBack" / alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  </div>
 </div>
 
 
 <div id="front">
  <div id="upperHalf">
  <img  src="/static/imghwm/default1.png"  data-src="spacer.png"  class="lazy" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Single/Up/AM/0.png"  class="lazy"  id="hoursUp"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Up/Left/0.png"  class="lazy"  id="minutesUpLeft" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Up/Right/0.png"  class="lazy"  id="minutesUpRight"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Up/Left/0.png"  class="lazy"  id="secondsUpLeft" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Up/Right/0.png"  class="lazy"  id="secondsUpRight"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  </div>
  <div id="lowerHalf">
  <img  src="/static/imghwm/default1.png"  data-src="spacer.png"  class="lazy" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Single/Down/AM/0.png"  class="lazy"  id="hoursDown"/ alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Down/Left/0.png"  class="lazy"  id="minutesDownLeft" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Down/Right/0.png"  class="lazy"  id="minutesDownRight" / alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  <img  src="/static/imghwm/default1.png"  data-src="Double/Down/Left/0.png"  class="lazy"  id="secondsDownLeft" / alt="js时钟翻牌效果实现代码分享_javascript技巧" ><img  src="/static/imghwm/default1.png"  data-src="Double/Down/Right/0.png"  class="lazy"  id="secondsDownRight" / alt="js时钟翻牌效果实现代码分享_javascript技巧" >
  </div>
 </div> 
</div>



</body>
<script src="mootools.js" type="text/javascript"></script>
<script src="animate.js" type="text/javascript"></script>
</html>

以上就是为大家分享的JavaScript时钟翻牌代码，希望大家可以喜欢。

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：js实现的全国省市二级联动下拉选择菜单完整实例_javascript技巧下一篇：js实现点击文本框显示日期选择器特效代码分享_javascript技巧

相关文章

查看更多