网页数字滚动插件
发布时间:2019-11-26 23:36:13

用count.js实现数字滚动动态效果,用waypoints监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果

1、需要先引入jquery官方文件,然后再引用插件相关的两个js文件,顺序不可颠倒

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>    <script src="jquery.waypoints.min.js"></script>    <script src="count.js"></script>

2、激活插件功能

2.1、首先通过class类名绑定数字,如下所示

<i class="counter">1998</i>

2.2、然后设置动画的延迟时间和总动画时长

<script type="text/javascript">$(function(){  $('.counter').counterUp({    delay: 20, // 每个数字动画的延迟时间,单位毫秒。    time: 2000 // 计数动画总持续时间,单位毫秒。  });})</script>

 本文为博客作者原创文章,转载请注明出处,感谢您的尊重!(http://www.cnsbq.com/jquery-down/229.html)

服务热线