网页Loading加载动画(二)

CSS代码：

<style type="text/css">
*{padding:0; margin:0;}
.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>

HTML代码:

<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>

JQuery代码:

<script>
//默认位置
 var delVal=50;
//定时函数
 function autoMove(){
 if(delVal>446){
 //加载成功
clearInterval(autoMove);
$(".mvBtn").css("left",50);
 } else {
 //加载中...
 delVal++;
 $(".mvBtn").css("left",delVal);
 }
 }
//加载调用
setInterval(autoMove,8);
//3点效果 . . .
 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>

素材：test2.jpg 

test1.jpg

玄玄 博客 http://www.blogxuan.com/ 喜欢就收藏吧