建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery数字滚动插件jquery.counterup.js

来源:易助科技网浏览量:55收藏

简介


jquery.counterup.js 该插件可以控制动画的延迟时间和动画过渡时间。但它依赖于Waypoints.js插件来监听滚动事件。从而实现页面滚动到数字可视窗口,实现让数字从零到指定数值的滚动。


JQuery数字滚动插件jquery.counterup.js-示例图



使用


1.  引入 jQuery.js、jquery.waypoints.js 和 jquery.counterup.js 文件


2.  HTML


<div class="content">
  <span class="counter">20</span>
  <span class="counter">100</span>
  <span class="counter">500</span>
</div>


3. 调用


<script>
  $('.counter').countUp();
</script>


也可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间


<div class="content">
  <span class="counter" data-counter-time="5000" data-counter-delay="50">20</span>
  <span class="counter" data-counter-time="5000" data-counter-delay="60">100</span>
  <span class="counter" data-counter-time="5000" data-counter-delay="10">500</span>
</div>



相关链接


GitHub 地址 :  https://github.com/ciromattia/jquery.counterup

效果演示 :  http://ciromattia.github.io/jquery.counterup/demo/index.html