jQuery制作Loading动画特效代码

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

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

以下是 jQuery制作Loading动画特效代码的示例演示效果:

当前平台(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制作Loading动画特效</title>
<style type="text/css">
*{padding:0; margin:0;}
body {background:#F5FAFD}
.mvBox{height:15px; background:#F5FAFD url(images/test2.jpg) no-repeat left center; width:471px; position:relative; padding:0 30px; margin:0 auto;}
.mvBtn{position:absolute; left:50px; top:0;}
.mvTxt{height:50px; line-height:50px; width:531px; text-align:center; font-size:30px; color:#29B6FF; font-family:Arial; margin:0 auto;}
</style>
<script language="javascript" src="js/jquery.js"></script>
</head>
<body>
<div style="background:#F5FAFD; padding:50px;">
<!--效果开始-->
<div class="mvTxt">Loading<span class="mvSq">.</span><span class="mvSq">.</span><span class="mvSq">.</span></div>
<div class="mvBox">
 <img class="mvBtn" src="images/test1.jpg" />
</div>
<script language="javascript">
 var delVal=50;
 function autoMove(){
	 delVal++;
	 if(delVal>400){
		delVal=50; 
	 }
	 $(".mvBtn").css("left",delVal);
 }
 setInterval(autoMove,8);
 var deNum=0;
 function autoTsq(){
	$(".mvSq").css("color","#F5FAFD");
	setTimeout(function(){$(".mvSq").eq(0).css("color","#29B6FF")},0);
	setTimeout(function(){$(".mvSq").eq(1).css("color","#29B6FF")},500);
	setTimeout(function(){$(".mvSq").eq(2).css("color","#29B6FF")},1000);
 }
 setInterval(autoTsq,1500);
</script>
<!--End-->
</div>
</body>
</html>

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