flipTimer – jQuery时钟翻牌效果插件

分类：代码日期：2016-08-02 点击(32,108) 评论(3)

flipTimer - jQuery时钟翻牌效果插件

简介

时钟翻牌效果常出现在天气软件的桌面插件上，HTC 著名的 Sense UI 也曾经使用了这种效果。虽然近两年更少见了，但它不失为一种经典的 UI，如果你仍然喜欢这种效果，不妨使用 flipTimer 这个 jQuery 插件来制作吧。flipTimer 除了可以制作时钟外，还可以用于倒计时，且提供回调函数。

浏览器兼容


IE10+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

flipTimer 并没有使用图片，而是使用 CSS3 动画制作，所以不兼容 IE 低版本。

使用方法

1、引入文件

<link rel="stylesheet" href="css/flipTimer.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flipTimer.js"></script>

2、HTML

<div class="dowebok">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
</div>

3、JavaScript

$(function(){
    $('.dowebok').flipTimer();
});

配置

属性/方法	类型	默认值	说明
seconds	布尔值	false	显示秒
minutes	布尔值	false	显示分钟
hours	布尔值	false	显示小时
days	布尔值	false	显示天
date	数字	(new Date()).toDateString()	传入一个 js 时间
direction	字符串	up	方向，可选 up / down，up 用于时间增加，down 用于时间递减
callback	函数	null	回调函数，只在 direction 为 “down” 时有效
digitTemplate	字符串		时钟模版