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

您所在的位置：网站首页 › js电子时钟暂停开始运行 › jQuery超酷3D翻页式电子时钟特效插件

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

2024-02-25 08:13| 来源: 网络整理| 查看: 265

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

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

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

作为时钟使用。作为计时器使用。作为倒计数器使用。 FlipClock的样式使用纯CSS定制。语法干净整洁。所有的东西都抽象到一个可复用的对象上。提供完整的API来创建“Clock Faces”。使用方法

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

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被重置的时候触发。

【本文地址】

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

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

今日新闻

推荐新闻