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 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Open and Print a Word Document
2007/06/15 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python计算圆周率pi的方法
2015/07/11 Python
Python二分查找详解
2015/09/13 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Python饼状图的绘制实例
2019/01/15 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
实现向右循环移位
2014/07/31 面试题
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
《社戏》教学反思
2016/02/22 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Python实现简繁体转换
2021/06/07 Python