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