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

前端技术 2023/09/02 JavaScript

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

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

为大家分享的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=\"spacer.png\" /><img id=\"hoursUpBack\" src=\"Single/Up/AM/0.png\"/>
  <img id=\"minutesUpLeftBack\" src=\"Double/Up/Left/0.png\" class=\"asd\" /><img id=\"minutesUpRightBack\" src=\"Double/Up/Right/0.png\"/>
  <img id=\"secondsUpLeftBack\" src=\"Double/Up/Left/0.png\" /><img id=\"secondsUpRightBack\" src=\"Double/Up/Right/0.png\"/>
  </div>
  <div id=\"lowerHalfBack\">
  <img src=\"spacer.png\" /><img id=\"hoursDownBack\" src=\"Single/Down/AM/0.png\" />
  <img id=\"minutesDownLeftBack\" src=\"Double/Down/Left/0.png\" /><img id=\"minutesDownRightBack\" src=\"Double/Down/Right/0.png\" />
  <img id=\"secondsDownLeftBack\" src=\"Double/Down/Left/0.png\" /><img id=\"secondsDownRightBack\" src=\"Double/Down/Right/0.png\" />
  </div>
 </div>
 
 
 <div id=\"front\">
  <div id=\"upperHalf\">
  <img src=\"spacer.png\" /><img id=\"hoursUp\" src=\"Single/Up/AM/0.png\"/>
  <img id=\"minutesUpLeft\" src=\"Double/Up/Left/0.png\" /><img id=\"minutesUpRight\" src=\"Double/Up/Right/0.png\"/>
  <img id=\"secondsUpLeft\" src=\"Double/Up/Left/0.png\" /><img id=\"secondsUpRight\" src=\"Double/Up/Right/0.png\"/>
  </div>
  <div id=\"lowerHalf\">
  <img src=\"spacer.png\" /><img id=\"hoursDown\" src=\"Single/Down/AM/0.png\"/>
  <img id=\"minutesDownLeft\" src=\"Double/Down/Left/0.png\" /><img id=\"minutesDownRight\" src=\"Double/Down/Right/0.png\" />
  <img id=\"secondsDownLeft\" src=\"Double/Down/Left/0.png\" /><img id=\"secondsDownRight\" src=\"Double/Down/Right/0.png\" />
  </div>
 </div> 
</div>



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

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

本文地址：https://www.stayed.cn/item/5964

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案