360开机效果JavaScript实现，原来如此简单

你是不是好奇，怎么用JavaScript搞一个像360开机那样 的回调函数？我这就告诉你怎么弄。先考你一题，你会把一个小方块移到网页最下面右边角落里吗？别急答案就在后面。

  
  
  
    #demo{
      width: 322px;  /*不设高，因为下面的盒子消失之后，上面的盒子立刻掉下来*/
      position: fixed;
      bottom:0;
      right:0;
    }
    span{
      position: absolute;
      top:0;
      right:0;
      width:30px;
      height: 20px;
      cursor: pointer;
    }
  



   
  

    
  
  

    
  




   function $id(id){return document.getElementById(id);}
   var demo=$id("demo");
   var shang=$id("shang");
   var xia=$id("xia");
   var close=$id("close"); //注意：不能直接用span.onclick，因为span是div的子元素,点击span的时候,发生了事件冒泡，响应在了父元素div上，所以对onclick事件的响应元素是父元素div
   close.onclick=function () {
       run(xia,{height:0},function () { //仿360开机：点击关闭区域时，首先下面的盒子高度变为0，之后整个大盒子宽度变成0，依次消失
         run(demo,{width:0}) //这里使用了回调函数
       })
   }
 
  //封装运动框架基本函数（多个属性）
  function run(obj,json,fn) {
    clearInterval(obj.timer);
    obj.timer=setInterval(function () {
      var flag=true; //用来判断定时器是否停止，一定写在遍历的外面，否则一遍历就true
      for( attr in json)
      {
        var cstyle=parseInt(getStyle(obj,attr)); //获得当前属性
        var step=(json[attr]-cstyle)/10; //计算步长
        step=step>0 ? Math.ceil(step) : Math.floor(step);
        obj.style[attr]=cstyle+step+"px";
 
        if(cstyle!=json[attr]) //在遍历中，只要有一个属性值没到达目标位置，定时器就不能停
        {
          flag=false;
        }
      }
 
      if(flag) //遍历完了之后，flag是true，所有的值都到达目标位置了，停止定时器
      {
        clearInterval(obj.timer);
        if(fn) //回调函数，定时器关闭之后，如果有fn，执行fn（）
        {
          fn();
        }
      }
    },30)
  }
 
  //返回当前样式的函数
  function getStyle(obj,attr) //返回谁的，哪个属性
  {
    if(obj.currrentStyle)
    {
      return obj.currentStyle[attr];
    }
    else{
      return window.getComputedStyle(obj,null)[attr]; //w3c浏览器
    }
  }
 

我们先把大箱子放在右下角固定好，别让它跑了接着，在大箱子右上边放一个关掉的小按钮。为了不让它乱跑，我们得用绝对定位，让它稳稳待在大箱子右上角。这时候你可能会好奇，为啥不直接给按钮加个点击事件？原因很简单，因为大箱子是按钮的爸爸，要是直接设点击效果，大箱子也会跟着动起来。所以，我们就用按钮的ID来绑定事件。

好，现在到了回调函数环节。当你点下关闭按钮后，得先把下面那个小盒子调成零高，接着再把大盒子缩到零宽。这样子下面的小盒子就不见了，而上面的大盒子就能自然地滑落下来！那为啥一开始不给大盒子定个高？其实这就是为了等小盒子没了后，让大盒子能够好好地落下来。而且注意，回调函数可得放到期定时器结束时才行啊～

好，咱再考你个问题。你晓得怎么让事情不闹大么？别着急，我马上给你解释哈。

其实关键就一点，牢记在心，按钮的爸爸就是大盒~ 所以我们不能随便给按钮上绑定个点击事件，要用它的身份证才行。这么一搞，事件冒泡的问题也就顺手解决了咯！看，难题其实也不是那么头疼对不对？

#demo{
  width:322px;
  position : fixed;
  bottom:0;
  right:0;
} 
span{
　　width:30px;
　　height: 20px;
　　position:absolute;
　　top:0;
　　right:0;
　　cursor:pointer;
}

还想问你另一件事，为啥大箱子刚开始没规定高？别慌，我这就跟你说。

，其实是这样的：得先让下面那个盒子消失，然后上面那盒才能掉下来。要是一开始就让大盒子挺高的，那上面这盒可就没法顺利地掉下来！so,咱们就在回调函数里把大盒子调低点。

通过刚才那番讲解，大概你也明白了怎么用JavaScript写出类似360开机那样的回调函数。希望这篇小文帮到你，顺手点个赞哈。今天咱们共享了JavaScript回调函数学360开机的实例代码。读懂了分析过程和提出问题，也就搞清楚了怎么定位盒子、避免冒泡还有为啥先别设大盒子的高宽度。希望这个能激发你的兴趣和思考，对你有点启发。如果你有啥疑惑或者想聊聊的话，欢迎在评论区留言嗷。最后别忘了点个赞再走~

close.onclick=function(){
  run(xia, {height:0}, function(){
    run(shang,{demo:0}
  }
}