jQuery数字滚动播放动画特效代码

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

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

以下是 jQuery数字滚动播放动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery数字滚动播放动画特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style type="text/css">
	.container { margin:150px auto; max-width:480px;}
	h2,h3 { text-align:center;}
	.demo { text-align:center; margin-top:1000px;}
	span.counter { display:block; margin:20px auto; font-size:64px; font-family:'Pacifico'}
</style>

</head>
<body>
<div class="container">
	<h2>jQuery数字滚动播放动画特效</h2>
	<h3>向下滚动页面 ↓</h3>
	<div class="demo">
		<span class="counter">1,498,547.00</span>
		<span class="counter">99.99</span>
		<span class="counter">1234567</span>
	</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript">
	$('.counter').countUp();
</script>
</body>
</html>

JS代码(jquery.countup.min.js):

!function(t){
	"use strict";
	t.fn.countUp=function(e){
	var a=t.extend({
	time:2e3,delay:10}
,e);
	return this.each(function(){
	var e=t(this),n=a,u=function(){
	e.data("counterupTo")||e.data("counterupTo",e.text());
	var t=parseInt(e.data("counter-time"))>0?parseInt(e.data("counter-time")):n.time,a=parseInt(e.data("counter-delay"))>0?parseInt(e.data("counter-delay")):n.delay,u=t/a,r=e.data("counterupTo"),o=[r],c=/[0-9]+,[0-9]+/.test(r);
	r=r.replace(/,/g,"");
	for(var d=(/^[0-9]+$/.test(r),/^[0-9]+\.[0-9]+$/.test(r)),s=d?(r.split(".")[1]||[]).length:0,i=u;
	i>=1;
	i--){
	var p=parseInt(Math.round(r/u*i));
	if(d&&(p=parseFloat(r/u*i).toFixed(s)),c)for(;
	/(\d+)(\d{
	3}
)/.test(p.toString());
	)p=p.toString().replace(/(\d+)(\d{
	3}
)/,"$1,$2");
	o.unshift(p)}
e.data("counterup-nums",o),e.text("0");
	var f=function(){
	e.text(e.data("counterup-nums").shift()),e.data("counterup-nums").length?setTimeout(e.data("counterup-func"),a):(delete e.data("counterup-nums"),e.data("counterup-nums",null),e.data("counterup-func",null))}
;
	e.data("counterup-func",f),setTimeout(e.data("counterup-func"),a)}
;
	e.waypoint(u,{
	offset:"100%",triggerOnce:!0}
)}
)}
}
(jQuery);

CSS代码(zzsc.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.htmleaf-container{margin:0 auto;}

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