<!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. Django Form 表单

    Form 表单功能 生成HTML表单元素检查表单元素的合法性验证如果错误,重复显示表单数据类型转换 Form相关的对象 Widget 渲染成HTML元素的工具Field Form对象中的一个字段For ...

  2. WMAppPRHeader.xml文件的作用

    对于很多开发者来说直接通过Visual Studio 2010生成的XAP文件和上传至App Hub通过Windows Phone Marketplace Technical Certificatio ...

  3. iphone 弹出键盘，文本框自动向上移动。

    1.让类继承UITextViewDelegate UITextView *inputTextView;UIScrollView * _scrollView; 2.在init函数中先创建scrollVi ...

  4. IOS @param view 需要获取层级结构的view

    - (void)applicationDidBecomeActive:(UIApplication *)application { NSString *str = [self digView:self ...

  5. fiddle连接终端测试配置

    第一次做app,对app的数据要进行一些数据抓包和数据分析,知道客户端发送到服务器端的过程和逻辑,通过抓包了解和分析出错,前提要先连接fiddle

  6. dojo/Deferred类和dojo/promise类的使用

    参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181        https://dojotoolkit.org/docume ...

  7. BZOJ2023: [Usaco2005 Nov]Ant Counting 数蚂蚁(dp)

    题意 题目描述的很清楚...  有一天,贝茜无聊地坐在蚂蚁洞前看蚂蚁们进进出出地搬运食物．很快贝茜发现有些蚂蚁长得几乎一模一样,于是她认为那些蚂蚁是兄弟,也就是说它们是同一个家族里的成员．她也发现整个 ...

  8. find cat sed awk 简单组合使用

    find:查找 // .表示当前目录:   /表示根目录:  | 管道符:  xargs表示将前面的搜索接口作为参数传递到后面的命令中:grep 过滤 // xxxx表示文件名 1.查找指定文件名的文 ...

  9. Cluster - 基本概念

    1.1 什么是集群 简单的说,集群(cluster)就是一组计算机,它们作为一个整体向用户提供一组网络资源.这些单个的计算机系统就是集群的节点(node).一个理想的集群是,用户从来不会意识到集群系统 ...

  10. MTCNN学习资源

    MTCNN pytorch版本的实现 TropComplique/mtcnn-pytorch https://github.com/TropComplique/mtcnn-pytorch MTCNN实 ...