jquery数字翻滚插件FlipClock.js

所属分类:其他,输入-动画效果,日期和时间

 49565  479  查看评论 (32)
分享到微信朋友圈
X
jquery数字翻滚插件FlipClock.js ie兼容8

使用 FlipClock.js

FlipClock.js 是一个 jQuery 插件,并且默认主题中的动画效果是基于 prefixfree.js,所以使用 FlipClock.js 需要需要加载 jQuery,prefixfree.js 和 flipclock.js,以及 FlipClock 的默认样式,所以一个基本的使用 FlipClock 的 HTML 文件如下:

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

然后通过下面两种方法初始化:

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

FlipClock 还有详细的设置,方法和回调函数,以及开发者 API 让你可以进行定义。


相关插件-动画效果,日期和时间

购物车商品飞入动画

使用css规则简单实现商品飞入效果
  动画效果
 22195  262

超酷炫的HTML5页面飘落蒲公英动画

别人都飘雪,咱们开始飘蒲公英啦!
  动画效果
 45775  648

新年快乐粒子烟花

根据其他插件改编拜年烟花效果
  动画效果
 45806  448

jQuery超酷文字淡入淡出显示特效

文字淡入淡出显示特效
  动画效果
 35917  363

讨论这个项目(32)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    mark.li 0
    2020/1/16 22:01:06
    为啥会先加1s再倒计时,比如 倒计时10s,会先 10变成11,然后倒计时
        0
        2020/6/17 11:06:08
        没有60s
        0
        2020/6/17 11:06:20
        没有60s
    回复
    墨纸笺 0
    2019/11/1 20:43:10
    flipclock感觉好久没有更新了,,, 回复
    哟呵 0
    2019/8/12 14:16:51
    在哪里设置时间? 回复
    白哥。2016.07.20 0
    2018/12/20 10:17:32
    你可明悟 0
    2018/8/12 11:17:47
    怎么重新从0开始,为什么以更改设置就会出现Cannot read property '$obj' of undefined 回复
    露侦探身边的核华生 0
    2018/3/22 9:37:00
    请问作者,这个放入自适应中的手机端,显示就从0开始了,求解答 回复
    任强 0
    2018/3/17 22:24:32
    请问作者,浏览器里用这个插件,在下方出现一个倒三角的黑色阴影,跟者计时器一块转动,怎么解决
    回复
    分开旅行 0
    2018/1/6 11:23:33
    倒计时大于100天的  就乱了   怎么办? 回复
    Jcandy 0
    2017/12/17 15:53:21

    刷新页面,倒计时又重新开始,这个问题怎么解决

        西瓜0
        2017/12/18 11:52:23

        用cookie或localStoragec存储值就行了。

        0
        2020/6/16 19:41:38
        对的
    回复
    ?? 0
    2017/6/23 13:47:10
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复