当前位置：首页 > 网页特效 > 幻灯片和轮播图

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

分类：幻灯片和轮播图日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<link rel="stylesheet" href="css/flipclock.css">
 
<script src="js/jquery.min.js"></script>
 
<script src="js/flipclock.js"></script>  
```             
#####  HTML结构
该计时器插件使用一个空的div即可。

```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>       
```         
#####  JAVASCRIPT
FlipClock需要jQuery来管理页面上的DOM元素。它是典型的jQuery插件，但是它返回的不是jQuery对象，而是一个FlipClock对象。

```html
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对象是上调用该方法会使时钟开始动画。
```html
clock.start(function() {
// this (optional) callback will fire each time the clock flips
});
```
stop()：该方法会将时钟动画停止。
```html
clock.stop(function() {
// this (optional) callback will fire after the clock stops
});
```
setTime()：该方法会在初始化后设置时钟的时间。
```html
clock.setTime(3600);
```
setCountdown()：该方法会改变计数器的计数方式，向上或向下计数。
```html
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被重置的时候触发。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果