提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery实现动态数字展示效果demo效果示例（整理）

jQuery 实现 示例 动态 数字 效果 整理 Demo
2023-09-14 09:13:42 时间

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery实现动态数字展示效果</title>
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <div class="count">实现动态数字展示效果：<span id="number" class="number" style="color:red;font-size: 16px;font-weight: bold;">800</span></div>
        <div class="count">实现动态数字展示效果：<span id="number" class="number" style="color:red;font-size: 16px;font-weight: bold;">800</span></div>
        <div class="count">实现动态数字展示效果：<span id="number" class="number" style="color:red;font-size: 16px;font-weight: bold;">800</span></div>
    </body>
    <script type="text/javascript">
        function number(value) {
            var num = $(".number");
            num.animate({
                count: value
            }, {
                duration: 3000, //持续时间  
                step: function() {
                    num.text(Math.round(this.count));
                }
            });
        };
        number(100);
    </script>
</html>

​​​​​​​

 

相关文章