999.9万
30.0%
/*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); 根据项目需要进行代码修改