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

Posted 2020-09-17 努力┗(｀O′)┛奋斗！

简单效果图：

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

 

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