<!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);
根据项目需要进行代码修改