jQuery数字滚动不断递增代码

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

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

以下是 jQuery数字滚动不断递增代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery数字滚动不断递增代码</title>
<style>
	.value,.value2,.value3{
		margin:0 auto;
		font-family:"Microsoft Yahei";
		font-size:30px;
		color:#333;
		margin-top:20px;
		text-align:center;
	}
</style>

</head>
<body>

<div class="value"></div>
<div class="value2"></div>
<div class="value3"></div>

<script src="js/jquery-1.8.3.min.js" ></script>
<script src="js/count.js" ></script>
<script type="text/javascript">
	
	$(".value").numberRock({
    speed:50,
    count:200
	})
	$(".value2").numberRock({
    speed:100,
    count:1000
	})
	$(".value3").numberRock({
    speed:34,
    count:10000
	})
</script>
</body>
</html>

JS代码(count.js):

(function($){
	$.fn.numberRock=function(options){
	var defaults={
	speed:24,count:100}
;
	var opts=$.extend({
}
,defaults,options);
	var div_by = 100,count=opts["count"],speed = Math.floor(count / div_by),sum=0,$display = this,run_count = 1,int_speed = opts["speed"];
	var int = setInterval(function (){
	if (run_count <= div_by&&speed!=0){
	$display.text(sum=speed * run_count);
	run_count++;
}
else if (sum < count){
	$display.text(++sum);
}
else{
	clearInterval(int);
}
}
,int_speed);
}
}
)(jQuery);

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