使用runningJs实现网页动态数字效果

效果传送门：runningJs

这是个依赖于JQuery的js；使用时请提前引进jQuery；

使用方法：

1.引入JQuery，running.css,running.js

2.在页面中写入以下js代码

$(function(){
			$('body').running();
		})

3.根据需要，在页面内插入以下内容；

   3.1数字增加效果

666

  3.2柱状图柱形增加

  3.3圆环跑动

65%

使用注意事项：

   1.该js采取的是监听屏幕距离顶部高度，屏幕滚动事件等方法执行的，所以如果你仅仅是一个不能滚动的网页，无法运行出效果；如果想实现，请自行更改相关的js代码；

 

原作者信息在js中

running.js

/*
 * jQuery.Running.js - jQuery plugin for Running
 *
 * Copyright (c) 2007-2015 Qietu inc
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.qietu.com/p/jQuery.Running.js
 *
 * Version:  1.0.0
 *
 */

(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() {
			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);

running.css

.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: 700;
	color: #e25a4a;
	font-family: 寰蒋闆呴粦, 榛戜綋
}

.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
}