<!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. IOS 九宫图解锁（封装）

    NJLockView.h /.m @class NJLockView; @protocol NJLockViewDelegate <NSObject> - (void)lockViewDi ...

  2. codeforces 1114C

    题目连接 : https://codeforces.com/contest/1114/problem/C 题目大意:给一个整数n(1e18>=n>=0),和一个整数k(1e12>=k ...

  3. Java后台工程师的3次面试

    第一次面试 我面的是一个中小公司,在BOSS直聘上面找的,去之前看了看关于Java的一些基础知识,在牛客网上面看的,也做了一下牛客网的题目.然后跟HR约了一个时间就去面试了.因为第一次面试,一点经验都 ...

  4. STL笔记(に)--vector容器

    Vector 1.可变长的动态数组 2.需包含头文件#include<vector> (当然,如果用了万能头文件#include<bits/stdc++.h>则可忽略) 3.支 ...

  5. Spring @Transactional 浅谈

    一般当我们在一个方法里面操作多个数据对象的可持久化操作时,我们通常这些操作能够成功一起事务提交成功.默认情况下,数据库处于自动提交模式.每一条语句处于一个单独的事务中,在这条语句执行完毕时,如果执行成 ...

  6. 通过rsync+inotify实现数据实时备份

    rsync的优点与不足 与传统的cp,scp,tar,备份方式相比,rsync具有安全性高备份迅速支持增量备份的优点,可以满足对实时性要求不高的需求,例如定期备份文件服务器数据到远端服务器,但是,当数 ...

  7. python之质数

    质数(prime number)又称素数,有无限个 质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数. 示例: num=[]; i=2 for i in range(2,100): j= ...

  8. 多种方式实现依赖注入及使用注解定义bean

    构造注入 如何给构造方法中的参数注入方法呢如下 首先bean代码如下 package cn.pojo; public class Greeting { /** * 说的话 */ private Str ...

  9. setInterval与setTimeout

    在自己用canvas画一个时钟时,画秒钟用的是利用图片将重复的线条遮住,但是会出现有两个秒钟线条同时存在,才想起setInterval有那么个坑,查了点资料,记录下,若有不对的或者未写到的点,还请大家 ...

  10. 第9课 文章模块分析及建表 Thinkphp5商城第四季

    目录 文章模块的分析 表结构 文章模块的分析 表结构 CREATE TABLE `tp_cate` ( `id` smallint(6) NOT NULL AUTO_INCREMENT COMMENT ...