<!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: %;

            }

        </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="" style="width:80%;"></div>

                    </div>

                </li>

                <li>

                    <!--pie-->

                    <div class="pie animatePie" data-animatetarget="">

                        <div class="pieLeft">

                            <div class="pieLeftInner"></div>

                        </div>

                        <div class="pieRight">

                            <div class="pieRightInner"></div>

                        </div>

                        <div class="pieInner"><span></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{ width: 120px; height: 120px;  border-radius: 50%; background: #e95549; position:relative; margin-top:20px; }

.pieLeftInner,

.pieRightInner { width: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 { width:120px; height:120px; position:absolute; z-index:1; }

.pieLeft { clip:rect(0px,120px,120px,60px); }

.pieRight { clip:rect(0px,60px,120px,0px); }

.pieInner { width: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; width:80%; position:relative; border-radius:2px; margin-top:10px;

}

.prograss .bar{

    background:#e95549; height:100%; width: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);

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

jQuery页面滚动数字增长插件的更多相关文章

  1. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  2. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  3. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. kissui.scrollanim页面滚动动画库插件

    简介 kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件.通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果. 下载地址及演示 在线演示 在线下载 安装 ...

  5. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  6. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  7. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  8. 一款很好用的页面滚动元素动画插件-AOS.JS

    aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...

  9. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

随机推荐

  1. ActiveMQ 报错 Temporary Store limit is 51200 mb

    ERROR | Temporary Store limit is 51200 mb, whilst the temporary data directory: D:\tool\apache-actil ...

  2. Java一个汉字占几个字节（详解与原理）(转载)

    1.先说重点: 不同的编码格式占字节数是不同的,UTF-8编码下一个中文所占字节也是不确定的,可能是2个.3个.4个字节: 2.以下是源码: 1 @Test 2 public void test1() ...

  3. C# NPOI 导出Execl 工具类

    NPOI 导出Execl 自己单独工具类 详见代码 using System; using System.Collections.Generic; using System.Linq; using S ...

  4. vs2017调试源代码

    最近刚入职 ,带我得导师发给我一堆项目,什么云端和医院端,各种wcf服务.window服务和一些公共类库来回调用.搞得是迷迷糊糊,晕头转向.反正是一脸大萌比... 不过经过几个日日夜夜得不停奋战,大致 ...

  5. JVM学习网址（收集总结）

    1.文章分类 - JVM调优总结   JVM综合调优汇总 星火燎原智勇 2018-08-16 11:11 阅读:8 评论:0 JVM调优04-概括总结 星火燎原智勇 2017-01-08 23:28 ...

  6. POJ3279(KB1-D 熄灯问题）

    Fliptile Description Farmer John knows that an intellectually satisfied cow is a happy cow who will ...

  7. BZOJ1660: [Usaco2006 Nov]Bad Hair Day 乱发节(单调栈)

    题意 题目链接 Sol 单调栈板子题.. 找到向左第一个比他大的位置,然后判断一下就可以了 #include<bits/stdc++.h> //#define int long long ...

  8. 【代码笔记】iOS-自动成表格的效果

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "LabelOnBackImag ...

  9. JS 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...

  10. Portal的安全代理（反向代理出口）配置架构

    对于正式运行的环境,一般需要设置网络安全控制区DMZ,通过代理,把仅需要的端口向客户端暴露,其他内部端口应该是在防火墙包含之内的. 下文将针对ArcGIS 的Portal软件,讲述在DMZ中如何架构的 ...