js回调函数仿360开机

2024-12-06 00:33:34

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

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

javascript+jQuery实现360开机时间显示效果

实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &
js仿360开机效果

本文实例为大家分享了js仿360开机效果的具体代码,供大家参考,具体内容如下实现效果: 1.点击关闭图片按钮先往下退出再往右退出实现步骤: 1.封装运动函数 2.给图片上的关闭设置一个盒子 3.给关闭盒子注册点击事件点击后 4.下面图片高度为0,设置一个缓动动画 5.上面图片宽度为0,设置一个缓动动画缓动动画代码(带回调函数):` function getStyle(obj,attr){ //兼容性写法获得样式 if(window.getComputedStyle){ return win
js回调函数仿360开机

本文实例为大家分享了js回调函数仿360开机的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #demo{ width: 322px; /*不设高,因为下面的盒子消失之后,上面的盒子立刻掉下来*/ position: fix
Node.js 回调函数实例详解

Node.js 回调函数阻塞与非阻塞 node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都支持回调函数. 阻塞代码实例(同步函数) //阻塞是按顺序执行的 var fs = require("fs"); var data = fs.readFileSync('input.txt'); console.log(data.toString()
JS回调函数简单用法示例

本文实例讲述了JS回调函数简单用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>testCallBack.html</title> </head> <body> <
node.js回调函数之阻塞调用与非阻塞调用

首先,node.js作为javascript运行平台,它采用了事件驱动和异步编程的方式,通过事件注册和异步函数,开发人员可以提高资源利用率,服务器的性能也能得到改善.其次,对于前端人来说,node.js作为js的运行平台,我们可以通过编写系统级或者服务器端的javascript代码交给node.js来执行,让我们前端人也能作用于后台,相比之下,浏览器端的javascript代码在运行时会受到各种安全性的限制,对客户系统的操作有限,而node.js则是一个全面的后台运行时,为javascript提
JS回调函数基本定义与用法实例分析

本文实例讲述了JS回调函数基本定义与用法.分享给大家供大家参考,具体如下: 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 字面上的理解,回调函数就是一个参数,将这个函数作为参数传到
JS回调函数原理与用法详解【附PHP回调函数】

本文实例讲述了JS回调函数原理与用法.分享给大家供大家参考,具体如下: JS回调函数何为回调函数,官方解释:当程序跑起来时,一般情况下,应用程序(application program)会时常通过API调用库里所预先备好的函数.但是有些库函数(library function)却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务.这个被传入的.后又被调用的函数就称为回调函数(callback function). 通常将一个函数B传入另一个函数A,并且在需要的时候再调用函数A. 说白
JS回调函数 callback的理解与使用案例分析

本文实例讲述了JS回调函数 callback的理解与使用.分享给大家供大家参考,具体如下: 基本理解一个概念回调函数回头再调用函数,等主干事情干完了,再回头干分支上的事情. 官方定义 A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 实例1 //定义主函数,回调函数作为参数 func
JS回调函数简单易懂的入门实例分析

本文实例讲述了JS回调函数.分享给大家供大家参考,具体如下: 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数.什么是JS?(点击查看) 下面先看看标准的解释: <script language="javascript"> function SortNumber( obj, func ) // 定义通用排序函数 { // 参数验证,如果第一个参数不是数组或第二个参数不是函数则抛出异常 if( !(obj instanceof Array) || !(f
JS回调函数深入理解

本文实例讲述了JS回调函数.分享给大家供大家参考,具体如下: 一.前奏在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果. function say (value) { alert(value); } alert(say); alert(say('hi js.')); 如果你测试了,就会发现: 只写变量名 say 返回的将会是 say方法本身,以字符串的形式表现出来. 而在变量名后加()如say()返回的就会使say方法调用后的结果,这里是弹出value的值. 二.js中函数

js回调函数仿360开机

相关推荐

随机推荐