jQuery鼠标滚动页面数字动画特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标滚动页面数字动画特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标滚动页面数字动画特效</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/countUp.min.js"></script>

</head>
<body>
<div style="text-align:center;margin:150px 0; font:normal 44px/24px 'MicroSoft YaHei';">往下滚动！</div>
<div id="wrap">
	<section>
		<h1 class="jumbo" id="myTargetElement">1890</h1>
		<h1 class="jumbo" id="myTargetElement2">15894</h1>
		<h1 class="jumbo" id="myTargetElement3">1890</h1>
	</section>
</div>

<script type="text/javascript">
	var options = {
  useEasing : true, 
  useGrouping : true, 
  separator : ',', 
  decimal : '.', 
  prefix : '', 
  suffix : '' 
};
var demo = new CountUp("myTargetElement", 0, 1890, 0, 2.5, options);
var demo2 = new CountUp("myTargetElement2", 0, 15894, 0, 2.5, options);
var demo3 = new CountUp("myTargetElement3", 0, 385, 0, 2.5, options);
$(window).scroll(function(){
	if($(window).scrollTop()>=600){
		demo.start();
		demo2.start();
		demo3.start();
	}
})
</script>
</body>
</html>

JS代码(countUp.min.js):

!function(a,b){
	"function"==typeof define&&define.amd?define(b):"object"==typeof exports?module.exports=b(require,exports,module):a.CountUp=b()}
(this,function(){
	var d=function(a,b,c,d,e,f){
	for(var g=0,h=["webkit","moz","ms","o"],i=0;
	i<h.length&&!window.requestAnimationFrame;
	++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];
	window.requestAnimationFrame||(window.requestAnimationFrame=function(a){
	var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){
	a(c+d)}
,d);
	return g=c+d,e}
),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){
	clearTimeout(a)}
),this.options={
	useEasing:!0,useGrouping:!0,separator:",",decimal:"."}
;
	for(var j in f)f.hasOwnProperty(j)&&(this.options[j]=f[j]);
	""===this.options.separator&&(this.options.useGrouping=!1),this.options.prefix||(this.options.prefix=""),this.options.suffix||(this.options.suffix=""),this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),isNaN(b)&&(this.startVal=Number(b.match(/[\d]+/g).join(""))),this.endVal=Number(c),isNaN(c)&&(this.endVal=Number(c.match(/[\d]+/g).join(""))),this.countDown=this.startVal>this.endVal,this.frameVal=this.startVal,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*Number(e)||2e3;
	var k=this;
	this.version=function(){
	return"1.5.3"}
,this.printValue=function(a){
	var b=isNaN(a)?"--":k.formatNumber(a);
	"INPUT"==k.d.tagName?this.d.value=b:"text"==k.d.tagName?this.d.textContent=b:this.d.innerHTML=b}
,this.easeOutExpo=function(a,b,c,d){
	return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b}
,this.count=function(a){
	k.startTime||(k.startTime=a),k.timestamp=a;
	var b=a-k.startTime;
	k.remaining=k.duration-b,k.frameVal=k.options.useEasing?k.countDown?k.startVal-k.easeOutExpo(b,0,k.startVal-k.endVal,k.duration):k.easeOutExpo(b,k.startVal,k.endVal-k.startVal,k.duration):k.countDown?k.startVal-(k.startVal-k.endVal)*(b/k.duration):k.startVal+(k.endVal-k.startVal)*(b/k.duration),k.frameVal=k.countDown?k.frameVal<k.endVal?k.endVal:k.frameVal:k.frameVal>k.endVal?k.endVal:k.frameVal,k.frameVal=Math.round(k.frameVal*k.dec)/k.dec,k.printValue(k.frameVal),b<k.duration?k.rAF=requestAnimationFrame(k.count):k.callback&&k.callback()}
,this.start=function(a){
	return k.callback=a,isNaN(k.endVal)||isNaN(k.startVal)||k.startVal===k.endVal?(console.log("countUp error:startVal or endVal is not a number"),k.printValue(c)):k.rAF=requestAnimationFrame(k.count),!1}
,this.pauseResume=function(){
	k.paused?(k.paused=!1,delete k.startTime,k.duration=k.remaining,k.startVal=k.frameVal,requestAnimationFrame(k.count)):(k.paused=!0,cancelAnimationFrame(k.rAF))}
,this.reset=function(){
	k.paused=!1,delete k.startTime,k.startVal=b,cancelAnimationFrame(k.rAF),k.printValue(k.startVal)}
,this.update=function(a){
	cancelAnimationFrame(k.rAF),k.paused=!1,delete k.startTime,k.startVal=k.frameVal,k.endVal=Number(a),k.countDown=k.startVal>k.endVal,k.rAF=requestAnimationFrame(k.count)}
,this.formatNumber=function(a){
	a=a.toFixed(k.decimals),a+="";
	var b,c,d,e;
	if(b=a.split("."),c=b[0],d=b.length>1?k.options.decimal+b[1]:"",e=/(\d+)(\d{
	3}
)/,k.options.useGrouping)for(;
	e.test(c);
	)c=c.replace(e,"$1"+k.options.separator+"$2");
	return k.options.prefix+c+d+k.options.suffix}
,k.printValue(k.startVal)}
;
	return d}
);

CSS代码(base.css):

@charset "utf-8";/*reset css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-size:10px;font:inherit;vertical-align:baseline;font-weight:normal;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,.footer,.header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
a{text-decoration:none;-moz-transition:all 200ms ease;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
textarea,select{resize:none;font-family:微软雅黑,"黑体";}
input{font-family:"微软雅黑","黑体";}
/*清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}
.clear{clear:both;height:0px;width:0px;line-height:0px;visibility:hidden;}
/*定位 显示*/
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
a{color:#666;}
em,i{font-style:normal;}
body{font-family:"微软雅黑";background:#fff;height:2000px;}
#wrap{width:981px;margin:800px auto -25px auto;text-align:left;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
section{display:block;clear:left;position:relative;width:100%;border-bottom:1px #C4C4C4 solid;}
h1.jumbo{font-size:8em;margin:0;color:#4d63bc;}
@media all and (max-width:1021px){#wrap{width:100%;padding:0 20px;}
h1.jumbo{font-size:5em;}
}
@media all and (max-width:480px){#wrap{padding:0 15px;}
h1.jumbo{font-size:2em;}
}

附件:下载该文件资源,减少时间成本(增值服务)