<!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. [转载]AngularJS入门教程03：迭代器

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

  2. [VC]strcpy和strncoy的区别

    第一种情况:char* p="how are you ?";char name[20]="ABCDEFGHIJKLMNOPQRS"; strcpy(name,p ...

  3. 【洛谷4657】[CEOI2017] Chase（一个玄学的树形DP）

    点此看题面 大致题意: 有一棵树,树上编号为\(i\)的节点上有\(F_i\)个铁球,逃亡者有\(V\)个磁铁,当他在某个节点放下磁铁时,与这个节点相邻的所有节点上的铁球都会被吸引到这个节点.然后一个 ...

  4. 运行自己的shell脚本

    shell脚本可以直接./**.sh,也可以bash **.sh 我用./**.sh运行自己写的一个脚本,会出现如下的错误: bnrc@bnrc:~$ ./pixel.sh bash: ./pixel ...

  5. 题解 CF20A 【BerOS file system】

    对于此题,我的心近乎崩溃 这道题,注意点没有什么,相信大佬们是可以自己写出来的 我是蒟蒻,那我是怎么写出来的啊 好了,废话少说,开始进入正题 这道题,首先我想到的是字符串的 erase 函数,一边运行 ...

  6. java编程基础——二叉树的镜像

    题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 题目代码 /** * @program: JavaCode * @description: 操作给定的二叉树,将其变换为源二叉树的镜像. * 二 ...

  7. 方法 -------JavaScript

    本文摘要:http://www.liaoxuefeng.com/ 在一个对象中绑定函数,称为这个对象的方法. 在JavaScript的中,对象的定义是这样的: var xiaoming = { nam ...

  8. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  9. java算法面试题：金额转换，阿拉伯数字的金额转换成中国传统的形式如：（￥1011）－>（一千零一拾一元整）输出。

    package com.swift; public class RenMingBi { private static final char[] data = new char[]{'零','壹','贰 ...

  10. 网络流_spfa最小费用最大流

    最大流: 不断搜索增广路,寻找最小的容量-流量,得到最大流量,但最大流量在有花费时不一定是最小花费. 最小费用最大流 算法思想: 采用贪心的思想,每次找到一条从源点到达汇点的花费最小的路径,增加流量, ...