jquery结合GASP数字动画插件

当前位置:主页 > jQuery库 > 文本和超链接 > jquery结合GASP数字动画插件
jquery结合GASP数字动画插件
分享:

    插件介绍

    lem_counter是一款jquery数字动画插件。该jquery数字动画插件结合GASP使用高性能的数字动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2018-03-02
    阅读:
简要教程

lem_counter是一款jquery数字动画插件。该jquery数字动画插件结合GASP使用高性能的数字动画效果。

使用方法

在页面中引入jquery、TweenLite.js和lem_counter.js文件。

<script src="jquery.min.js"></script>
<script src="TweenLite.js"></script>
<script src="lem_counter.js"></script>
                
HTML结构

使用一个<div>作为时钟动画的容器。

<div class="counter"></div>                  
                
初始化插件

在页面DOM元素加载完毕之后,可以通过lemCounter()方法来初始化该jquery数字动画插件。

$('.counter').lemCounter({
  value_to: 100
});
                

配置参数

配置参数可以通过data属性直接写在DOM元素上,例如:

<div class="counter"
     data-lem-counter='{"value_from": 100, "value_to": 500}'>
</div>           
                

可用的配置参数有:

参数 类型 默认值
value_from int 0
value_to int 0
locale bool/string false
value_to_from_content bool false
animate_duration int 2

该jquery数字动画插件的github地址为:https://github.com/lemehovskiy/lem_counter