jquery加分动画效果代码

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

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

以下是 jquery加分动画效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery加分动画效果</title>
<style type="text/css"> 
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
ul,li{ list-style:none;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}

#message{position: absolute;z-index:9999;width:372px;height:63px;text-align:center;color: #fff;font-size:20px;line-height:63px; background:url(message_bg.png) 0 0 no-repeat;}
</style> 

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.message.js"></script>
</head>
<body>

<h1 class="tit-h1">jquery加分动画效果</h1> 

<div class="wrap">

<p align="center">

<script  type="text/javascript">
$(function(){
	//取得每次相加的数值，mum为要加的分数，n为相加的流水次数
	function getAddNum(num,n){
		var len = num.toString().length;//取得数值的长度
		var sp=1; //每次相加的数值
		if(len>2){ //如果分数长度大于2，（总相加次数-1）次相加过程中就每次相加（分数长度-1）个1，最后加上剩余的数值。
			var J=0;
			for(J=0;J<(len-2);J++){	//计算出 （分数长度-1）个1
				sp+="1";
			}
			sp = sp*1;

			var v= parseInt(num/sp); //有多少次
			if(n<v){
				return sp; //返回（分数长度-1）个1
			}else{
				return (num-v*sp);//返回剩余数值
			}			
		} 
		return sp;
	}
	$("#add").click(function(){

		 //取得要加的分数
	     var fen = $("#fen").val();
		 //取得现在的分数
		 var result = $("#result").text()*1;
		 //分数验证
		 if(!(/^(([0-9])|([1-9]+[0-9]*))$/.test(fen)) ){
			  alert('不是有效数字');
			  return false;
		 }
	     //文本框和按钮设置成不可用
		 $("#add").attr("disabled",true);
		 $("#fen").attr("disabled",true);

		 //显示加分提示框
		 $.MessageShow("+"+fen+"分");

		 //开始进行分数变化过程
		 var a_num = fen;
		 var a=result; 
		 var I=0; //记录相加次数
		 var clear = setInterval(function(){
		 	 $("#result").text(a);
			 if(a<(result*1+fen*1)){
			    a = a+getAddNum(fen,I);
				I++;
				
			 }else{
				 //停止运行
				 clearInterval(clear);
				 //文本框和按钮设置成可用
				 $("#add").attr("disabled",false);
				 $("#fen").attr("disabled",false);
			 }
			 
		 },(1));// 3000/a_num+1
	});
});
</script>

 分数<b id='result'>100</b>
	<br/>
  	<input type='text' name='fen' id='fen' value=''/>
	<input type='button' name='add' id='add' value='立刻加分'/>

</p>
</div>
</body> 
</html>

JS代码(jquery.message.js):

jQuery.MessageShow = function (msg){
	$("<div id='message'>" + msg + "</div>").appendTo("body").hide().css("top",($(window).height()+ $(window).scrollTop() - 63) / 2).css("left",($(document).width() - 372) / 2).fadeIn("fast").delay(2000).fadeOut("slow",function (){
	$(this).remove();
}
);
}

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