jQuery页面滚动数字增长插件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="jQuery.running.css" />
        <style>
            ul,li{list-style: none;}
            h3{font-size: 50px;}
            html,body{
                height: 200%;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <ul>
                <li><h3><span class="animateNum" data-animatetarget="999.9">999.9</span>万</h3></li><!--需要为小数点-->
                <li><h3><span class="animateNum" data-animatetarget="30.0">30.0</span>%</h3></li>
                <li>
                    <div class="prograss">
                        <div class="bar animateBar prograss_bar_yellow" data-animatetarget="80" style="80%;"></div>
                    </div>
                </li>
                <li>
                    <!--pie-->
                    <div class="pie animatePie" data-animatetarget="65">
                        <div class="pieLeft">
                            <div class="pieLeftInner"></div>
                        </div>
                        <div class="pieRight">
                            <div class="pieRightInner"></div>
                        </div>
                        <div class="pieInner"><span>65</span>%</div>
                    </div>
                    <!--pie-->
                </li>
            </ul>
        </div>
        <script src="../jquery.min.js"></script>
        <script src="jQuery.running.js"></script>
        <script>
            $(function(){
                $("body").running();
                
            });
        </script>
    </body>
</html>
/*pie*/
.pie{  120px; height: 120px;  border-radius: 50%; background: #e95549; position:relative; margin-top:20px; }
.pieLeftInner,
.pieRightInner { 120px; height:120px; background-color:#e5e5e5; border-radius:100px; position:absolute; }
.pieLeftInner { clip:rect(0px,120px,120px,60px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);  }
.pieRightInner { clip:rect(0px,60px,120px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);  }
.pieLeft,
.pieRight { 120px; height:120px; position:absolute; z-index:1; }
.pieLeft { clip:rect(0px,120px,120px,60px); }
.pieRight { clip:rect(0px,60px,120px,0px); }
.pieInner { 80px; height:80px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; text-align:center; line-height:80px; font-size:24px; font-weight:bold; color:#e25a4a; font-family:"寰�蒋闆呴粦", "榛戜綋";}

/*prograss*/
.prograss{
    background:#eee; height:15px; 80%; position:relative; border-radius:2px; margin-top:10px;
}
.prograss .bar{
    background:#e95549; height:100%; 10%; border-radius:2px 0 0 2px;
}
.prograss_bar_yellow{
    background:#f8b757 !important;
}
(function($) {
    $.fn.running = function() {
        function n() {           //数字滚动
            var t = $(".animateNum");
            var n = {
                top: $(window).scrollTop(),
                bottom: $(window).scrollTop() + $(window).height()
            };
            t.each(function() {
                var t = $(this).attr("data-animateTarget");
                n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimateNum({
                    obj: $(this),
                    target: t,
                    totalTime: 1e3
                }))
            })
        };

        function b() {          //柱形图滚动
            var t = $(".animateBar");
            var n = {
                top: $(window).scrollTop(),
                bottom: $(window).scrollTop() + $(window).height()
            };
            t.each(function() {
                var t = $(this).attr("data-animateTarget");
                n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimateBar({
                    obj: $(this),
                    target: t,
                    totalTime: 1e3
                }))
            })
        };

        function p() {          //圆圈滚动
            var t = $(".animatePie");
            var n = {
                top: $(window).scrollTop(),
                bottom: $(window).scrollTop() + $(window).height()
            };
            t.each(function() {
                var t = $(this).attr("data-animateTarget");
                n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimatePie({
                    obj: $(this),
                    target: t,
                    totalTime: 1e3
                }))
            })
        };
        $(window).bind("scroll", function() { //当window滚动的时候执行
            n();
            b();
            p()
        });

        function AnimateNum(t) {
            this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
        };

        function AnimateBar(t) {
            this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
        };

        function AnimatePie(t) {
            this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
        };
        AnimateNum.prototype = {
            init: function() {
                return this.target ? (this.animation(), void 0) : !1
            },
            animation: function() {
                var t = this,
                    i = this.target.indexOf("."),
                    e = 0;
                i >= 0 && (e = this.target.length - i - 1);
                var n = this.target.replace(".", ""),
                    s = this.totalTime / 30 | 0,
                    a = n / s | 0,
                    r = 0,
                    h = 0;
                t.timer = setInterval(function() {
                    r++, h += a, t.obj.html(h / Math.pow(10, e)), r >= s && (clearInterval(t.timer), t.obj.html(t.target))
                }, 30)
            }
        };
        AnimateBar.prototype = {
            init: function() {
                return this.target ? (this.animation(), void 0) : !1
            },
            animation: function() {
                var t = this,
                    i = this.target.indexOf("."),
                    e = 0;
                i >= 0 && (e = this.target.length - i - 1);
                var n = this.target.replace(".", ""),
                    s = this.totalTime / 30 | 0,
                    a = n / s | 0,
                    r = 0,
                    h = 0;
                t.timer = setInterval(function() {
                    r++, h += a, t.obj.css('width', h / Math.pow(10, e) + '%'), r >= s && (clearInterval(t.timer), t.obj.animate({
                        'width': t.target + '%'
                    }))
                }, 30)
            }
        };
        AnimatePie.prototype = {
            init: function() {
                return this.target ? (this.animation(), void 0) : !1
            },
            animation: function() {
                var t = this;
                s = this.totalTime / 60 | 0;
                r = 0;
                t.i = 0;
                t.count = 0;
                t.j = 0;
                num = t.target;

                function start1() {
                    t.obj.find('.pieInner span').html(t.i + 1);
                    if(num == 0) return false;
                    t.i = t.i + 1;
                    if(t.i == num) {
                        clearInterval(t.t1)
                    }
                    if(t.i == 50) {
                        clearInterval(t.t1);
                        num2 = num - 50;
                        t.t2 = setInterval(start2, 1)
                    };
                    t.obj.find(".pieLeftInner").css("-o-transform", "rotate(" + t.i * 3.6 + "deg)");
                    t.obj.find(".pieLeftInner").css("-moz-transform", "rotate(" + t.i * 3.6 + "deg)");
                    t.obj.find(".pieLeftInner").css("-webkit-transform", "rotate(" + t.i * 3.6 + "deg)")
                };

                function start2() {
                    t.obj.find('.pieInner span').html(50 + t.j + 1);
                    if(num2 == 0) return false;
                    t.j = t.j + 1;
                    if(t.j == num2) {
                        clearInterval(t.t2)
                    }
                    if(t.j == 50) {
                        clearInterval(t.t2)
                    };
                    t.obj.find(".pieRightInner").css("-o-transform", "rotate(" + t.j * 3.6 + "deg)");
                    t.obj.find(".pieRightInner").css("-moz-transform", "rotate(" + t.j * 3.6 + "deg)");
                    t.obj.find(".pieRightInner").css("-webkit-transform", "rotate(" + t.j * 3.6 + "deg)")
                };
                t.t1 = setInterval(function() {
                    r++;
                    r >= s && (clearInterval(t.timer), start1())
                }, 30)
            }
        }
    }
})(jQuery);

根据项目需要进行代码修改

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xueweijie/p/7927813.html