jQuery和CSS3精美翻页式电子时钟特效
来源：htmleaf
阅读：34
时间：2018-07-10 16:03
这是一款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 < w)="" {="" if="" (rand(1,="" 100)="">< chance_spec)="" {="" drawspec(data,="" x,="" y,="" w);="" }="" x++;="" }="" if="" (x="==" w)="" {="" x="0;" y++;="" }="" if="" (y="==" h)="" {="" ctx.putimagedata(data,="" 0,="" 0);="" return;="" }="" drawpattern(canvas,="" ctx,="" data);="" }="" function="" main()="" {="" var="" canvas,="" ctx,="" data;="" console.log('starting1');="" canvas="document.getElementById('my-canvas');" ctx="canvas.getContext('2d');" data="ctx.getImageData(0," 0,="" canvas.width,="" canvas.height);="" drawpattern(canvas,="" ctx,="" data);="" updatetime();="" }="" function="" updatetime()="" {="" var="" currenttime,="" seconds,="" minutes,="" hours,="" times,="" i;="" currenttime="new" date();="" times="{" 'second':="" currenttime.getseconds(),="" 'minute':="" currenttime.getminutes(),="" 'hour':="" currenttime.gethours()="" };="" for="" (type="" in="" times)="" {="" if="" (times.hasownproperty(type))="" {="" settimes(type,="" timetostring(times[type]));="" }="" }="" settimeout(updatetime,="" 1000);="" }="" function="" timetostring(currenttime)="" {="" var="" t;="" t="currentTime.toString();" if="" (t.length="==" 1)="" {="" return="" '0'="" +="" t;="" }="" return="" t;="" }="" function="" getprevioustime(type)="" {="" return="" $('#'="" +="" type="" +="" '-top').text();="" }="" function="" settimes(type,="" timestr)="" {="" settime(getprevioustime(type="" +="" '-tens'),="" timestr[0],="" type="" +="" '-tens');="" settime(getprevioustime(type="" +="" '-ones'),="" timestr[1],="" type="" +="" '-ones');="" }="" function="" settime(previoustime,="" newtime,="" type)="" {="" if="" (previoustime="==" newtime)="" {="" return;="" }="" settimeout(function()="" {="" $('#'="" +="" type="" +="" '-top').text(newtime);="" },="" 150);="" settimeout(function()="" {="" $('.bottom-container',="" $('#'="" +="" type="" +="" '-bottom')).text(newtime);="" },="" 365);="" animatetime(previoustime,="" newtime,="" type);="" }="" function="" animatetime(previoustime,="" newtime,="" type)="" {="" var="" top,="" bottom;="" top="$('#top-'" +="" type="" +="" '-anim');="" bottom="$('#bottom-'" +="" type="" +="" '-anim');="" $('.top-half-num',="" top).text(previoustime);="" $('.dropper',="" bottom).text(newtime);="" top.show();="" bottom.show();="" $('#top-'="" +="" type="" +="" '-anim').css('visibility',="" 'visible');="" $('#bottom-'="" +="" type="" +="" '-anim').css('visibility',="" 'visible');="" animatenumswap(type);="" settimeout(function()="" {="" hidenumswap(type);="" },="" 365);="" }="" function="" animatenumswap(type)="" {="" $('#top-'="" +="" type="" +="" '-anim').toggleclass('up');="" $('#bottom-'="" +="" type="" +="" '-anim').toggleclass('down');="" }="" function="" hidenumswap(type)="" {="" $('#top-'="" +="" type="" +="" '-anim').toggleclass('up');="" $('#bottom-'="" +="" type="" +="" '-anim').toggleclass('down');="" $('#top-'="" +="" type="" +="" '-anim').css('visibility',="" 'hidden');="" $('#bottom-'="" +="" type="" +="" '-anim').css('visibility',="" 'hidden');="" }="" $(document).ready(main);="" window.requestanimframe="(function(callback){" return="" window.requestanimationframe="" ||="" window.webkitrequestanimationframe="" ||="" window.mozrequestanimationframe="" ||="" window.orequestanimationframe="" ||="" window.msrequestanimationframe="" ||="" function(callback){="" window.settimeout(callback,="" 1000="" 60);="" }="" })();="">
该jQuery和CSS3精美翻页式电子时钟特效的codepen地址为：https://codepen.io/swartkrans/pen/gaode
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3