注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

可定制的漂亮质感的jquery翻页时钟插件FlipClock

动画 fishcity 3288浏览

可定制的漂亮质感的jquery翻页时钟插件FlipClock

FlipClock是一个使用CSS3动画时钟效果的jQuery插件,其可轻松实现定时器时钟和光滑的翻转效果,同时FlipClock是一个可定性极强的插件,内容置了丰富的API,喜欢折腾的朋友就来玩下吧,毕竟效果真的不错。

特点:

可用为时钟

可用为计时器

可用为倒计时

主题使用纯CSS

简洁明了的语法

一切都抽象为可重用的对象

开发人员根据API可全功能的创建自定义“钟面”

基础使用方法

引入核心文件,创建基本的html代码

<html>
	<head>
		<link rel="stylesheet" href="/assets/css/flipclock.css">
	</head>
	<body>
		<div class="your-clock"></div>
		
		<script src="/assets/js/libs/jquery.js"></script>
		<script src="/assets/js/flipclock/flipclock.min.js"></script>
	</body>
</html>

实例化,FlipClock需要jQuery DOM操作,是一个典型的jQuery插件,但它返回的是FlipClock对象,不是jQuery对象。以下两个方法都可以实例化。

var clock = $('.your-clock').FlipClock({
// ... 你用的选项参数
});

var clock = new FlipClock($('.your-clock'), {
// ...你用的选项参数
});

选项

autoStart

布尔值,设为true,时间自动开始,默认值为true

countdown

布尔值,设为true,为倒计时,默认值为false

callbacks

回调函数,具体看下方回调列表

classes

 类型为object, DOM 对象的CSS样式类名

clockFace

(字符串) 这是时钟的名称,用于构建时钟显示.默认值为 HourlyCounter.

defaultClockFace

(字符串) 如果定义的主题不存在就使此项的定义.默认值为 HourlyCounter.

defaultLanguage

(字符串)默认的语言. 默认值为英文

方法

start(),开始时钟

clock.start(function() {
//时间的每次翻动都会触发回调
});

stop(),停止时钟

clock.stop(function() {

// 时钟停止后触发

});

setTime()设定时间

clock.setTime(3600);

setCountdown() 记时方式,ture为倒计,false为走时

clock.setCountdown(true);

getTime(),获取FlipClock对象的时间

var time  = clock.getTime(); // Returns the FlipClock.Time object

回调

destroy

记时器清除时触发

create

钟的主题创建时触发

init

FlipClock对象初始化触发

interval

每个定时器的时间间隔时触发

start

时钟开始时触发

stop

时钟停止时触发

reset

定时器被重置时触发

转载请注明:jQ酷 » 可定制的漂亮质感的jquery翻页时钟插件FlipClock

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。