梦想之家

数字更改更换特效

运行效果如下图所示:
1.gif
源码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字更改特效</title>
</head>
<body>
<div>
<p>网站运行:<span>5000</span> 天</p>
<p>文章数量:<span>1500</span> 篇</p>
<p>访客数量:<span>10666</span> 次</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
        $(document).ready(function(){
             $('.numberCount').each(function(){
                 $(this).prop('Counter',0).animate({
                         Counter: $(this).text(),
                     },{
                         duration: 2500,
                         easing: 'swing',
                         step: function (now){
                         $(this).text(Math.ceil(now));
                     }
                 });
             });
        });
    </script>
</body>
</html>


相关推荐

您此刻的心情: