一个简单的加载动画，js实现

标签：==   int   log   div   margin   flow   问题   简单   间隔   

简单效果图：

html:

<div class="box">
　　<ul>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　　　<li></li>
　　</ul>
</div>

css:

.box{
　　width: 200px;
　　height: 80px;
　　margin: 200px auto;
　　border: 1px solid red;
}
.box>ul{
　　clear: both;
　　overflow: hidden;
　　margin-left: 20px;
}
.box>ul>li{
　　width: 4px;
　　height: 40px;
　　margin: 20px 5px 0 0px;
　　background: skyblue;
　　float: left;
　　position: relative;
}

js:

$(function(){
　　big($(".box>ul>li"));
})
　　var i=-1;
function big(obj){
　　var li_len=obj.length;
　　var li_h=obj.height();
　　var a_h=li_h+40;
　　setInterval(function(){
　　　　i++;
　　　　if(i==li_len){
　　　　　　i=0;
　　　　}
　　　　obj.eq(i).animate({
　　　　　　"height":a_h,
　　　　　　"top":-20+"px"
　　　　},800);
　　　　obj.eq(i-1).animate({
　　　　　　"height":li_h,
　　　　　　"top":0
　　　　},800)　　　　　　
　　},200)　　　　
}

动画执行速度与定时器每次间隔时间自己可以按需求修改。如果两个的速度不一样的话，反正测试的时候，当当前浏览器页面最小化，然后再最大化时动画就会有问题，搞不清楚原因

一个简单的加载动画，js实现

标签：==   int   log   div   margin   flow   问题   简单   间隔   

原文地址：http://www.cnblogs.com/zjjDaily/p/6842749.html