js回调函数仿360开机

更新时间：2019年12月26日 09:15:21 作者：shanlu

这篇文章主要为大家详细介绍了js回调函数仿360开机，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js回调函数仿360开机的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #demo{
      width: 322px;  /*不设高，因为下面的盒子消失之后，上面的盒子立刻掉下来*/
      position: fixed;
      bottom:0;
      right:0;
    }
    span{
      position: absolute;
      top:0;
      right:0;
      width:30px;
      height: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="demo">
  <span id="close"></span> <!--盒子右上角的x号区域-->
  <div id="shang">
    <img src="t.jpg" alt=""/>
  </div>
  <div id="xia">
    <img src="b.jpg" alt=""/>
  </div>
</div>
</body>
</html>
<script>
   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浏览器
    }
  }
 
</script>

关键代码：

1、demo（最外面整个大盒子）的定位

固定定位，放在页面的右下方

span（关闭按钮）绝对定位在demo的右上方：

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

2、防止冒泡，因为span（关闭按钮）的父元素是demo, 所以不能直接写 span.onclick , 这样会发生冒泡，相当于点击了父元素demo, 事件会响应在父元素上，所以应该用span的 id 绑定事件

3、回调函数，点击关闭按钮时，首先下面的盒子高度变成 0 ，然后整个盒子的宽度变成 0，依次消失（所以一开始demo 的高度不应该设置，因为下面的盒子消失之后，上面的盒子会掉下来）回调函数写的位置：定时器结束的位置

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
360开机

JS实现异步上传压缩图片
这篇文章主要为大家详细介绍了JS实现异步上传压缩图片，并立即显示图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
JS中用try catch对代码运行的性能影响分析
要捕获JavaScript代码中的异常一般会采用 try catch，不过try catch的使用是否是对代码性能产生影响呢？答案是肯定有的，但是有多少不得而知。下面这篇文章就给大家详细介绍了在JS中用try catch对代码运行的性能影响，有需要的朋友们可以参考借鉴。
2016-12-12
JavaScript中关于递归与回溯的实例详解
这篇文章主要将为大家介绍一下JavaScript中递归与回溯的原理及使用，文中通过一些例题进行了详细介绍，感兴趣的小伙伴可以跟随小编一起学习一下
2022-07-07
Javascript技术难点之apply，call与this之间的衔接
这篇文章主要介绍了Javascript技术难点之apply，call与this之间的衔接的相关资料,需要的朋友可以参考下
2015-12-12
Javascript 函数parseInt()转换时出现bug问题
天测试的测出来的。parseInt(1.13*100)，实际返回值是112，下面有个示例，大家可以看看下
2014-05-05
Ionic如何创建APP项目
这篇文章主要介绍Ionic如何创建APP项目的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JavaScript实现继承的6种常用方式总结
JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法。本文为大家总结了JavaScript实现继承的6种常用方式，需要的可以参考一下
2022-07-07
JavaScript中的await/async的作用和用法
await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。这篇文章主要介绍了JavaScript中的await/async的作用和用法的相关资料
2016-10-10
基于JavaScript 实现拖放功能
本文通过实例代码给大家介绍了JavaScript 实现拖放功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
这篇文章主要介绍了使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享,编写半透明遮罩层时要注意定位问题、不要满屏遮罩,需要的朋友可以参考下
2016-05-05