divcss2015-11-13 17:19:12 18974
采用CSS3和Jq打造的翻牌式计时效果,包含普通计时效果,倒计时效果以及指定时间内的倒计时效果。
代码
<div class="butns"><a href="index1.html">时钟效果</a><a href="index2.html">倒计时</a><a href="index.html">10秒倒计时(回调函数)</a></div> <div class="dowebok"> <div class="hours"></div> <div class="minutes"></div> <div class="seconds"></div> </div>
需要引入的css
<link href="fliptimer.css" rel="stylesheet" type="text/css" />
需要引入的js
<script src="jquery.min.js"></script> <script src="jquery.fliptimer.js"></script> <script> $(function(){ var d = new Date(); var myDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + (d.getSeconds() + 10); $('.dowebok').flipTimer({ direction: 'down', date: myDate, callback: function(){ alert('倒计时结束!'); } }); }); </script>
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:翻牌效果,倒计时,css翻动
文章固定链接:https://www.pengyaou.com/legendsz/front/divcss/MTI1.html
上一篇 Jq甘特图插件
下一篇 多种超酷的CSSHover效果