<!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. JQUERY操作JSON数组添加新的属性和值

    语法: var data = {}; data["Order"] =order; data["Sort"] = sort; 但是需要注意的是,如果data后面还 ...

  2. bzoj AC倒序

    Search GO 说明:输入题号直接进入相应题目,如需搜索含数字的题目,请在关键词前加单引号 Problem ID Title Source AC Submit Y 1000 A+B Problem ...

  3. void (*signal(int sig, void (*func) (int))) (int)理解

    http://blog.csdn.net/sever2012/article/details/8281271 1.signal( int sig, void (*func)(int))signal是一 ...

  4. 【BZOJ1087】[SCOI2005] 互不侵犯King（状压DP）

    点此看题面 大致题意: 在\(N×N\)的棋盘里面放\(K\)个国王,使他们互不攻击,共有多少种摆放方案(国王能攻击到它周围的8个格子). 状压\(DP\) 一看到这道题我就想到了经典的八皇后问题,但 ...

  5. python_47_Python2中字符编码与转码

    #python3默认是Unicode,Unicode是万国码,不管中文字符还是英文,所有的每个字符都占2个字节空间,16位 #python2默认是ascii码 #ascii码不能存中文,一个英文只能占 ...

  6. kubernetes-存储卷（十二）

    为了保证数据的持久性,必须保证数据在外部存储在docker容器中,为了实现数据的持久性存储,在宿主机和容器内做映射,可以保证在容器的生命周期结束,数据依旧可以实现持久性存储.但是在k8s中,由于pod ...

  7. CUDA常见问题与解答

    源 1.在SDK自带的例子程序中,发现SRC文件珜下有.cpp文件和.cu文件.这两种文件的关系和各自的作用是什么呀? 答:SDK自带例子中的.cpp文件主要是一些CPU端处理,或者是使用CPU计算对 ...

  8. Activiti学习记录(四)

    1 连线 注意:如果将流程图放置在和java类相同的路径,需要配置: 1.1 部署流程定义+启动流程实例 ProcessEngine processEngine = ProcessEngines.ge ...

  9. RuPengGame游戏引擎 精灵 createSprite 创建 setSpritePosition 设置位置 playSpriteAnimate 播放动画 setSpriteFlipX设置翻转 精灵图片下载地址

    package com.swift; import java.awt.Point; import com.rupeng.game.GameCore;//导入游戏引擎包 public class Gam ...

  10. iOS常用第三方类库 Xcode插件

    第三方类库(github地址): 1.AFNetworking 网络数据     https://github.com/AFNetworking/AFNetworking 2.SDWebImage 图 ...