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实现的UBB编码函数
Mar 09 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python解包用法详解
2021/02/17 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
幼儿教育感言
2014/02/05 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
车间质检员岗位职责
2015/04/08 职场文书
针对吵架老公保证书
2015/05/08 职场文书
实施意见格式范本
2015/06/05 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis