js回调函数仿360开机


Posted in Javascript onDecember 26, 2019

本文实例为大家分享了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>

js回调函数仿360开机

关键代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
理解JavaScript中的对象
Aug 25 Javascript
js仿360开机效果
Dec 26 #Javascript
element-ui中按需引入的实现
Dec 25 #Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 #Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 #Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 #Javascript
如何基于JS截获动态代码
Dec 25 #Javascript
You might like
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python中关于for循环的碎碎念
2017/06/30 Python
python自动裁剪图像代码分享
2017/11/25 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Django的Modelforms用法简介
2019/07/27 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
销售主管的自我评价分享
2014/01/03 职场文书
区三好学生主要事迹
2014/01/30 职场文书
积极向上的团队口号
2014/06/06 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
python基础学习之递归函数知识总结
2021/05/26 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers