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 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