小巧的jQuery计数器插件,带有Easing效果 – counter.js

小巧的jQuery计数器插件

counter.js是一个小巧的jQuery插件,带有Easing效果,允许从一个给定的数字计数或倒数。

使用方法

1.在HTML页面中加载最新版的jQuery库和counter.js文件

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/counter.min.js"type="text/javascript"></script>

2.加载jQuery easing插件

<script src="js/jquery.easing.js"type="text/javascript"></script>

3.创建一个计数容器

<div id="counter"></div><br>

4.初始化计数器插件

$("#counter").counter({
    autoStart: true,
    // true/false, default: true
    duration: 5000,
    // milliseconds, default: 1500
    countFrom: 10,
    // start counting at this number, default: 0
    countTo: 30,
    // count to this number, default: 0
    runOnce: true,
    // only run the counter once, default: false
    placeholder: "?",
    // replace the number with this before counting,
    easing: "easeOutCubic",
    // easing effects
    onStart: function() {},
    // callback on start of the counting
    onComplete: function() {},
    // callback on completion of the counting
    numberFormatter: // function used to format the displayed numbers.
    function(number) {
        return "$ " + number;
    }
});
打赏
下载 在线预览 积分 (-2) 吐槽 (1)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽