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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
BootStrap selectpicker
Jun 20 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
JS实现炫酷轮播图
Nov 15 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注入实例
2006/10/09 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
JS实现li标签的删除
2019/04/12 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
对python中return与yield的区别详解
2020/03/12 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
初任培训自我鉴定
2013/10/07 职场文书
后勤副校长自我鉴定
2013/10/13 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
培训主管岗位职责
2014/02/01 职场文书
现场施工员岗位职责
2014/03/10 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android