【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

JQuery代码实现数字滚动到指定数字大小的特效

594次阅读
没有评论

热帖网站首页的统计数字看起来很呆板,如何在页面加载的时候显示数字从1开始滚动到目前的数字大小呢?只需要简单的两步(当然前提是网站已引入jquery.min.js):

1、复制下列JQuery代码到footer.php或者header.php文件中:

<script type="text/javascript">
$(document).ready(function(){
$('.counter-value').each(function(){
$(this).prop('Counter',0).animate({
Counter: $(this).text()
},{
duration: 3500,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});
</script>

2、找到需要添加滚动特效的数字所属html标签,一般是<span>或者<div>,添加class属性(class=”counter-value”):

<div>
<span>访客量</span>
<span class="counter-value">37941</span>
</div>

实现效果:

JQuery代码实现数字滚动到指定数字大小的特效

P1.统计数字滚动效果

正文完
 
itylq
版权声明:本站原创文章,由 itylq 2023-03-05发表,共计528字。
转载说明:本站文章遵循CC-4.0国际许可协议,转载请注明出处(格式如“来源:IT摇篮曲www.itylq.com")。
评论(没有评论)
验证码