zoukankan      html  css  js  c++  java
  • 一个简单的加载动画,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)    
     }
      

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

  • 相关阅读:
    全栈的苦逼和崛起
    Swift内部类调用外部类方法、属性的变通
    Assets.xcassets误删后的恢复
    UITableViewCell嵌套UITableView的正确姿势
    GPU Accelerated Computing with Python
    Windows 10创意者更新ISO发布!官方下载
    Amazing iOS Tips
    self-sizing cell的一个问题
    buf.swap32()
    buf.swap16()
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/6842749.html
Copyright © 2011-2022 走看看