这是一款jQuery和CSS3精美翻页式电子时钟特效。该电子时钟使用CSS3渐变和transform来制作翻页电子时钟的外观,然后通过jquery代码来驱动电子时钟的翻页显示时间效果。
使用方法
在页面中引入jquery和style.css文件。
<script src="path/to/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css">
HTML结构
该翻页式电子时钟的HTML结构如下。
<main> <div style="display:none"> <div id="top-test-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">2</div> </div> <div id="bottom-test-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">3</div></div> </div> </div> <canvas id="my-canvas"></canvas> <div id="clock"> <div class="time-container hours"> <div class="digit"> <div class="fade"> </div> <span class="num top" id="hour-tens-top">1</span> <span class="num bottom" id="hour-tens-bottom"> <div class="bottom-container">1</div></span> <div class="swapper"> <div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">8</div> </div> <div id="bottom-hour-tens-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">9</div></div> </div> </div> <div class="ring ring-left"></div> <div class="ring ring-right"></div> </div> <div class="digit"> <div class="fade"> </div> <span class="num top" id="hour-ones-top">3</span> <span class="num bottom" id="hour-ones-bottom"> <div class="bottom-container">3</div></span> <div class="swapper"> <div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">8</div> </div> <div id="bottom-hour-ones-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">9</div></div> </div> </div> <div class="ring ring-left"></div> <div class="ring ring-right"></div> </div> </div> <div class="time-container minutes"> <div class="digit"> <div class="fade"> </div> <span class="num top" id="minute-tens-top">4</span> <span class="num bottom" id="minute-tens-bottom"> <div class="bottom-container">4</div></span> <div class="swapper"> <div id="top-minute-tens-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">8</div> </div> <div id="bottom-minute-tens-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">9</div></div> </div> </div> <div class="ring ring-left"></div> <div class="ring ring-right"></div> </div> <div class="digit"> <div class="fade"> </div> <span class="num top" id="minute-ones-top">3</span> <span class="num bottom" id="minute-ones-bottom"> <div class="bottom-container">3</div></span> <div class="swapper"> <div id="top-minute-ones-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">8</div> </div> <div id="bottom-minute-ones-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">9</div></div> </div> </div> <div class="ring ring-left"></div> <div class="ring ring-right"></div> </div> </div> <div class="time-container seconds"> <div class="digit"> <div class="fade"> </div> <span class="num top" id="second-tens-top">5</span> <span class="num bottom" id="second-tens-bottom"> <div class="bottom-container">5</div></span> <div class="swapper"> <div id="top-second-tens-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">8</div> </div> <div id="bottom-second-tens-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">9</div></div> </div> </div> <div class="ring ring-left"></div> <div class="ring ring-right"></div> </div> <div class="digit"> <div class="fade"> </div> <span class="num top" id="second-ones-top">3</span> <span class="num bottom" id="second-ones-bottom"> <div class="bottom-container">2</div></span> <div class="swapper"> <div id="top-second-ones-anim" class="num-anim top-anim" style="display:none;"> <div class="top-half-num">2</div> </div> <div id="bottom-second-ones-anim" class="num-anim bottom-anim" style="display:none;"> <div class="bottom-half-num"> <div class="dropper">3</div></div> </div> </div> <div class="ring ring-left"></div> <div class="ring ring-right"></div> </div> </div> </div> </main>
初始化插件
在页面DOM元素加载完毕,通过下面的方法来驱动电子时钟的翻页显示时间效果。
var CHANCE_SPEC, x, y; CHANCE_SPEC = 60; x = 0; y = 0; function rand(min, max) { return Math.floor(Math.random() * (max - min + 1) - min); } function drawSpec(data, x, y, w) { var index; index = (x + y * w) * 4; data.data[index + 0] = 0; data.data[index + 1] = 0; data.data[index + 2] = 0; data.data[index + 3] = 30; } function drawPattern(canvas, ctx, data) { var w, h; w = canvas.width; h = canvas.height; while (x该jQuery和CSS3精美翻页式电子时钟特效的codepen地址为:https://codepen.io/swartkrans/pen/gaode
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!