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

简单效果图:

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

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

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