脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 360开机

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

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

您可能感兴趣的文章:

相关文章

  • webpack图片转为base64的实现示例

    webpack图片转为base64的实现示例

    在开发过程中,图片转成base64是常有的事,本文主要介绍了webpack图片转为base64的实现示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-12-12
  • laypage.js分页插件使用方法详解

    laypage.js分页插件使用方法详解

    这篇文章主要为大家详细介绍了laypage.js分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 微信小程序图片加载失败时替换为默认图片的方法

    微信小程序图片加载失败时替换为默认图片的方法

    这篇文章主要介绍了微信小程序图片加载失败时替换为默认图片的方法,本文分情况通过实例代码给大家讲解，需要的朋友可以参考下
    2019-12-12
  • JavaScript实现旋转轮播图

    JavaScript实现旋转轮播图

    这篇文章主要为大家详细介绍了JavaScript实现旋转轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js绘制购物车抛物线动画

    js绘制购物车抛物线动画

    这篇文章主要为大家详细介绍了js绘制购物车抛物线动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • js判断浏览器是否支持严格模式的方法

    js判断浏览器是否支持严格模式的方法

    除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。这篇文章给大家详细介绍了js判断浏览器是否支持严格模式的方法，有需要的朋友们可以参考借鉴。
    2016-10-10
  • 诘屈聱牙之javascript中国象棋

    诘屈聱牙之javascript中国象棋

    诘屈聱牙之javascript中国象棋...
    2007-04-04
  • 一分钟学会JavaScript中的try-catch

    一分钟学会JavaScript中的try-catch

    这篇文章主要给大家介绍了关于如何通过一分钟学会JavaScript中try-catch的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • javaScript 关闭浏览器 (不弹出提示框)

    javaScript 关闭浏览器 (不弹出提示框)

    如果网页不是通过脚本程序打开的（window.open()），调用window.close()脚本关闭窗口前，必须先将window.opener对象置为null，否则浏览器（IE7、IE8）会弹出一个确定关闭的对话框。
    2010-01-01
  • 再谈javascript图片预加载技术(详细演示)

    再谈javascript图片预加载技术(详细演示)

    由于javascript无法获取img文件头数据，必须等待其加载完毕后才能获取真实的大小，所以lightbox类效果为了让图片居中显示，导致其速度体验要比直接输出的差很多。
    2011-03-03

最新评论