jQuery简单实现数字滚动在原数字基础上增加

最新推荐文章于 2023-03-24 15:02:33 发布

S_m_r

最新推荐文章于 2023-03-24 15:02:33 发布

阅读量342

点赞数

分类专栏： Jquery数字滚动文章标签： jQuery 动态数字后台管理数据显示缓动效果

本文链接：https://blog.csdn.net/S_m_r/article/details/116291177

版权

Jquery数字滚动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个功能比较简单主要用作的后台管理系统的一些数据显示,可以用来装逼用效果如下:

在这里插入图片描述

可以点击修改滚动的数字

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #count {
            font-size: 50px;
            font-weight: 700;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="count"></div>
    <div id="count1"></div>
    <div id="count2"></div>

    <button id="BTN">修改</button>
    <script>
        $(function () {
            $("#count").numberRock({
                lastNumber: 8000,	//终止数字
                duration: 800,
                easing: 'swing',  	//慢快慢
            });
        });
        $(function () {
            $("#count1").numberRock({
                lastNumber: 100000, //终止数字
                duration: 2000,
                easing: 'linear',  	//慢快慢
            });
        });
        $(function () {
            $("#count2").numberRock({
                lastNumber: 1500, //终止数字
                fristNumber: 1000,
                duration: 1000,
                easing: 'linear',  	//慢快慢
            });
        });

        (function ($) {
            $.fn.numberRock = function (options) {
                var defaults = {
                    fristNumber: '',
                    lastNumber: '',
                    duration: 2000,
                    easing: 'swing'  //swing(默认 : 缓冲 : 慢快慢)  linear(匀速的)
                };
                var opts = $.extend({}, defaults, options);

                $(this).animate({
                    num: "numberRock",
                }, {
                    duration: opts.duration,
                    easing: opts.easing,
                    complete: function () {
                        console.log("success");
                    },
                    step: function (a, b) {  //可以检测我们定时器的每一次变化
                        $(this).html(parseInt(opts.fristNumber + b.pos * (opts.lastNumber - opts.fristNumber)));

                    }
                });

            }

        })(jQuery);

        document.getElementById("BTN").onclick = function () {
            $(function () {
                $("#count2").numberRock({
                    lastNumber: 1600, //终止数字
                    fristNumber: 1500,
                    duration: 1000,
                    easing: 'linear',  	//慢快慢
                });
            });
        }
    </script>
</body>

</html>

S_m_r

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单实现数字滚动在原数字基础上增加

这个功能比较简单主要用作的后台管理系统的一些数据显示,可以用来装逼用效果如下:可以点击修改滚动的数字代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
复制链接

扫一扫