js仿360开机效果


Posted in Javascript onDecember 26, 2019

本文实例为大家分享了js仿360开机效果的具体代码,供大家参考,具体内容如下

实现效果:

1.点击关闭图片按钮先往下退出再往右退出

实现步骤:

1.封装运动函数
2.给图片上的关闭设置一个盒子
3.给关闭盒子注册点击事件点击后
4.下面图片高度为0,设置一个缓动动画
5.上面图片宽度为0,设置一个缓动动画

缓动动画代码(带回调函数):`

function getStyle(obj,attr){ //兼容性写法获得样式
        if(window.getComputedStyle){ 
          return window.getComputedStyle(obj, null)[attr];
        }else{
          return obj.currentStyle[attr];
        }
      }
       function animate(obj, json, speed, callback){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var flag = true;
          for(var attr in json){
          var current = parseInt(getStyle(obj,attr));
          var step = (json[attr] - current) / 10;
           step = step > 0 ? Math.ceil(step) : Math.floor(step);
           obj.style[attr] = current + step +'px';
          if(current != json[attr]){
            flag = false;
          }
        }
         if(flag){ 
          clearInterval(obj.timer);
          if(callback && typeof callback == 'function'){ //验证callback是否传递,传递的话看是否是函数类型
           callback();
          }
         }
        },speed);
      }

开机图片,的由两个图片中组成

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box{
      width: 322px;
      position: fixed;
      bottom:0;
      right:0;
    }
    span{
      position: absolute;
      top:0;
      right:0;
      width:30px;
      height: 20px;
      cursor: pointer;
    }
    .box img{
      vertical-align: top;
    }
  </style>
  <script type="text/javascript" src="函数封装.js"></script>
  <script type="text/javascript">
    function $(id){
      return document.getElementById(id);
    }
    window.onload = function(){
      var span = document.getElementsByTagName('span')[0];
      var box = $('box');
      var bottom = $('bt');
      var top = $('hd');
      span.onclick = function(){
        var json = {"height": 0};
        animate(bottom,json,20,function(){
        animate(box,{"width":0},20);
        });
      }
    }
  </script>
</head>
<body>
<div class="box" id="box">
  <span></span>
  <div class="hd" id="hd">
    <img src="images/t.jpg" alt=""/>
  </div>
  <div class="bd" id="bt">
    <img src="images/b.jpg" alt=""/>
  </div>
</div>
</body>
</html>

效果:

js仿360开机效果

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

Javascript 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
关于JS中的作用域中的问题思考分享
Apr 06 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
通过微信公众平台获取公众号文章的方法示例
Dec 25 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
浅析python中的迭代与迭代对象
2018/10/08 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python实现横向拼接图片
2020/03/23 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
大整数数相乘的问题
2012/07/22 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
企业宗旨标语
2014/06/10 职场文书
人代会标语
2014/06/30 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
财务工作失职检讨书
2014/11/21 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技