网站数字动画翻滚效果实现方法(指定位置加载)
网站上有很多的数字翻滚效果，可以在页面滚动时，将指定的数字从0开始计数增加动画。该数字动画可以控制动画的延迟时间和动画过渡时间。它依赖于插件来监听滚动事件。
下面介绍一下这种网站数字动画翻滚效果实现方法。
第一步：下载jquery数字动画翻滚插件；
第二步：在自己的网站上引入该插件；
|
1 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">"jquery.waypoints.min.js"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">"jquery.countup.min.js"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span></div></div> |
第三步：使用<span>元素作为数字的容器。
|
1 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>span <span style="color: #FF0000;">class</span><span style="color: #339933;">=</span><span style="color: #3366CC;">"counter"</span><span style="color: #339933;">></span><span style="color: #CC0000;">1981</span><span style="color: #339933;"></</span>span<span style="color: #339933;">></span></div></div> |
可以使用data-counter-time和data-counter-delay属性来设置数字动画的动画时间和延迟时间。
|
1 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>span <span style="color: #FF0000;">class</span><span style="color: #339933;">=</span><span style="color: #3366CC;">"counter"</span> data<span style="color: #339933;">-</span>counter<span style="color: #339933;">-</span>time<span style="color: #339933;">=</span><span style="color: #3366CC;">"5000"</span> data<span style="color: #339933;">-</span>counter<span style="color: #339933;">-</span>delay<span style="color: #339933;">=</span><span style="color: #3366CC;">"50"</span><span style="color: #339933;">></span><span style="color: #CC0000;">1981</span><span style="color: #339933;"></</span>span<span style="color: #339933;">></span></div></div> |
第四步：在网页最底部加上以下的代码，来初始化数字动画。
|
1 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap">$<span style="color: #009900;">(</span><span style="color: #3366CC;">'.counter'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">countUp</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></div> |
也可以在初始化的时候传入配置参数（统一控制速度和延迟时间）。
|
1 2 3 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap">$<span style="color: #009900;">(</span><span style="color: #3366CC;">'.counter'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">countUp</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><br> delay<span style="color: #339933;">:</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">,</span><br> time<span style="color: #339933;">:</span> <span style="color: #CC0000;">2000</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></div> |
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 网站数字动画翻滚效果实现方法(指定位置加载)
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 网站数字动画翻滚效果实现方法(指定位置加载)
