<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box{

            width: 322px;

            position: fixed;

            bottom:;

            right:;

        }

        span{

            position: absolute;

            top:;

            right:;

            width:30px;

            height: 20px;

            cursor: pointer;

        }

    </style>

    <script src="../jquery1.0.0.1.js"></script>

    <script>

        // window.onload = function () {

        //     //需求：下面的盒子高度变为0，然后大盒子的宽在变为0.

        //     var guanbi = document.getElementById("guanbi");

        //     var box = guanbi.parentNode;

        //     var b = document.getElementById("b");

        //     guanbi.onclick = function () {

        //         //下面的盒子高度变为0，然后大盒子的宽在变为0.

        //         animate(b,{"height":0}, function () {

        //             animate(box,{"width":0});

        //         });

        //     }

        // }

        // 

        window.onload=function(){

            var oClose=document.getElementById("guanbi");

            var oBox=document.getElementsByTagName("div")[];

            var oB=document.getElementById("b");

            oClose.onclick=function(){

                animate(oB,{"height":},function(){

                    animate(oBox,{"width":});

                });

            }

        }

    </script>

</head>

<body>

    <div class="box">

        <span id="guanbi"></span>

        <div class="hd" id="t">

            <img src="data:images/t.jpg" alt=""/>

        </div>

        <div class="bd" id="b">

            <img src="data:images/b.jpg" alt=""/>

        </div>

    </div>

</body>

</html>

引入原生Javascript

/**

 * Created by Lenovo on 2016/9/11.

 */

function show(ele){

    ele.style.display = "block";

}

/**

 * 获取元素样式兼容写法

 * @param ele

 * @param attr

 * @returns {*}

 */

function getStyle(ele,attr){

    if(window.getComputedStyle){

        return window.getComputedStyle(ele,null)[attr];

    }

    return ele.currentStyle[attr];

}

//参数变为3个

function animate(ele,json,fn){

    //先清定时器

    clearInterval(ele.timer);

    ele.timer = setInterval(function () {

        //开闭原则

        var bool = true;

        //遍历属性和值，分别单独处理json

        //attr == k(键)    target == json[k](值)

        for(var k in json){

            //四部

            var leader = parseInt(getStyle(ele,k)) || ;

            //1.获取步长

            var step = (json[k] - leader)/;

            //2.二次加工步长

            step = step>?Math.ceil(step):Math.floor(step);

            leader = leader + step;

            //3.赋值

            ele.style[k] = leader + "px";

            //4.清除定时器

            //判断: 目标值和当前值的差大于步长，就不能跳出循环

            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

            if(json[k] !== leader){

                bool = false;

            }

        }

        console.log();

        //只有所有的属性都到了指定位置，bool值才不会变成false；

        if(bool){

            clearInterval(ele.timer);

            //所有程序执行完毕了，现在可以执行回调函数了

            //只有传递了回调函数，才能执行

            if(fn){

                fn();

            }

        }

    },);

}

//获取屏幕可视区域的宽高

function client(){

    if(window.innerHeight !== undefined){

        return {

            "width": window.innerWidth,

            "height": window.innerHeight

        }

    }else if(document.compatMode === "CSS1Compat"){

        return {

            "width": document.documentElement.clientWidth,

            "height": document.documentElement.clientHeight

        }

    }else{

        return {

            "width": document.body.clientWidth,

            "height": document.body.clientHeight

        }

    }

}

javascript原生360 开机小动画的更多相关文章

  1. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  2. 【前端】javascript+jQuery实现360开机时间显示效果

    实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将displ ...

  3. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  4. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  5. 玩玩小程序：使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

    使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...

  6. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  7. JavaScript原生实现《贪吃蛇》

    概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...

  8. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

  9. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

随机推荐

  1. innobackupex基于binlog日志的恢复 -- 模拟slave恢复

    说明:一般来说,如果恢复的binlog量不大,可以使用此方法来恢复:mysqlbinlog /data/mysqlbak/binlogbak/restoredb-bin.000018 |mysql - ...

  2. ARM体系结构与编程-3

    ARM存储系统:ARM中用于存储管理的系统控制协处理器CP15:包括16个32位寄存器,其编号为0到15.实际上对于某些编号的寄存器可能相应有多个物理寄存器. 訪问CP15寄存器的指令:MRC.MCR ...

  3. vim 编辑器的使用方法

    vim 命令模式       默认打开文件为命令模式 命令行模式     shift+: 命令行模式 编辑模式       i 编辑模式 Esc 切换命令模式 命令模式 -----字符操作 i   当 ...

  4. NOIP2018提高组Day1 解题报告

    前言 关于\(NOIP2018\),详见此博客:NOIP2018学军中学游记(11.09~11.11). 这次\(NOIP\ Day1\)的题目听说很简单(毕竟是三道原题),然而我\(T3\)依然悲剧 ...

  5. 【BZOJ3720】Gty的妹子树（主席树+时间分块）

    点此看题面 大致题意: 给你一棵有根树,让你支持三种操作:询问某子树中大于\(x\)的值的个数,把某一节点值改成\(x\),添加一个父节点为\(u\).权值为\(x\)的节点. 关于此题做法 此题做法 ...

  6. datetime 插件

    1  写一段文本 <div id="nomarl-wrap"> <div class="form-group"> <label c ...

  7. Oracle Hint 之 Append

    1 描述 所谓直接路径操作,就是绕过buffer cache,直接将数据插入到表所在的数据文件中: 假如有表A,要将A中的数据插入到表B,在普通的间接插入下,先将A中的数据块传进buffer cach ...

  8. django+xadmin在线教育平台（一）

    大家好,此教程为在慕学网的实战教程Python升级3.6 强力Django+杀手级Xadmin打造在线教育平台的学习笔记,不对望指正! 使用Django+Xadmin打造在线教育平台(Python2, ...

  9. 第48课 thinkphp5添加商品库

    目录 思路: 1. html页面里属性下拉框里的值是从goods_attr联attr里的查出来传到模板里的.在属性的下拉栏里展示出来 2. html页面里用二维数组的结构goods_attr[{$k} ...

  10. C语言中可变参数的使用

    在C语言程序编写中我们使用最多的函数一定包括printf以及很多类似的变形体.这个函数包含在C库函数中,定义为 int printf( const char* format, ...); 除了一个格式 ...