浙江 杭州

jQuery超酷3D翻页式电子时钟特效插件

系统分类: 网页特效 - jquery插件 - jQuery定时执行 2015-05-26

人气13984

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       FlipClock.js是一款实现翻页式效果的jQuery计时器插件。该计时器插件可以实现时分秒的计时,12小时制的计时,24小时制的计时,各种计数器效果,倒计数效果等等。

FlipClock.js是一款实现翻页式效果的jQuery计时器插件。该计时器插件可以实现时分秒的计时,12小时制的计时,24小时制的计时,各种计数器效果,倒计数效果等等。

它的效果和jQuery和CSS3超酷3D翻牌式倒计数特效类似,但功能更加强大。

现在有各种版本的计时器和计数器插件,但是它们大部分都是只实现了某个特定方面的内容。而FlipClock充分适应了各种需求,既可以做计数器,也可以做计时器。以下是FlipClock的一些应用场景和它的一些特点:

  • 作为时钟使用。

  • 作为计时器使用。

  • 作为倒计数器使用。

  • FlipClock的样式使用纯CSS定制。

  • 语法干净整洁。

  • 所有的东西都抽象到一个可复用的对象上。

  • 提供完整的API来创建“Clock Faces”。

使用方法

该计时器插件需要jQuery 1.7.x+的支持。使用时要先引入jQuery和flipclock.js以及flipclock.css文件。

<link rel="stylesheet" href="css/flipclock.css">

<script src="js/jquery.min.js"></script>

<script src="js/flipclock.js"></script>

 

HTML结构

该计时器插件使用一个空的<div>即可。

<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>

 

JAVASCRIPT

FlipClock需要jQuery来管理页面上的DOM元素。它是典型的jQuery插件,但是它返回的不是jQuery对象,而是一个FlipClock对象。

var clock = $('.your-clock').FlipClock({
// ... your options here
});

 

var clock = new FlipClock($('.your-clock'), {
// ... your options here
});

 

配置参数

  • autoStart:类型:boolean。如果设置为false,时钟不会自动开始运行。默认值为true

  • countdown:类型:boolean。如果设置为true,时钟会以向上翻页的形式执行计时动画。默认值为false

  • callbacks:类型:object。在各种时间事件被触发后返回的一个对象回调函数。

  • classes:类型:object。用于添加到DOM元素上的CSS类的对象。

  • clockFace:类型:string。用于创建所显示时钟的名称。默认值为HourlyCounter

  • defaultClockFace:类型:string。如果 clock face 没哟丠定义,使用该参数来作为默认的 clock face 。默认值为HourlyCounter

  • defaultLanguage:类型:string。默认使用的语言。默认值是english

方法

下面的方法属于 FlipClock.Factory 类的方法。

  • start():在FlipClock对象是上调用该方法会使时钟开始动画。

    clock.start(function() {
    // this (optional) callback will fire each time the clock flips
    });
  • stop():该方法会将时钟动画停止。

    clock.stop(function() {
    // this (optional) callback will fire after the clock stops
    });
  • setTime():该方法会在初始化后设置时钟的时间。

    clock.setTime(3600);
  • setCountdown():该方法会改变计数器的计数方式,向上或向下计数。

    clock.setCountdown(true);
  • getTime():在初始化后获取时钟的时间。 var time  = clock.getTime(); // Returns the FlipClock.Time object

Callbacks

  • destroy:当timer被销毁的时候触发。

  • create:当 clock face 创建的时候触发。

  • init:当FlipClock对象初始化的时候被触发。

  • interval:在timer的每次时间间隔触发。

  • start:当时钟开始动画的时候触发。

  • stop:当时钟停止动画的时候触发。

  • reset:当timer被重置的时候触发。

查看演示
下载资源:6
下载资源
错误提交:

格式:zip 大小:125.54KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-760.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery超酷3D翻页式电子时钟特效插件

我当前G币余额:0 已下载次数:6

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)