JavaScript native 360 boot small animation

<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title></title> <style>. box{width:322px; Position:fixed; Bottom:0; Right:0;            } span{Position:absolute; Top:0; Right:0;            width:30px;            height:20px;        Cursor:pointer; }    </style> <script src=".. /jquery1.0.0.1.js"></script> <script>//window.onload = function () {//     //Requirement: The box height below becomes 0, then the width of the large box becomes 0. //var guanbi = document.getElementById ("Guanbi"); //var box = Guanbi.parentnode; //var B = document.getElementById ("B"); //Guanbi.onclick = function () {//         //the height of the box below becomes 0, then the width of the large box becomes 0. //Animate (b,{"height": 0}, Function () {//Animate (box,{"width": 0}); //         }); //     }        // }        // window.onload=function () {varOclose=document.getelementbyid ("Guanbi"); varObox=document.getelementsbytagname ("Div")[0]; varOb=document.getelementbyid ("b"); Oclose.onclick=function () {Animate (ob,{"Height":0},function () {Animate (obox,{"width":0});            }); }        }    </script>class="Box"> <span id="Guanbi"></span> <divclass="HD"Id="T"> "images/t.jpg"alt=""/> </div> <divclass="BD"Id="b"> "images/b.jpg"alt=""/> </div> </div></body>
Introducing native JavaScript
/** * Created by Lenovo on 2016/9/11.*/function Show (ele) {Ele.style.display="Block";}/** * Get element style compatible notation * @param ele * @param attr * @returns {*}*/function GetStyle (ele,attr) {if(window.getComputedStyle) {returnwindow.getComputedStyle (Ele,NULL) [attr]; }    returnele.currentstyle[attr];}//parameter changed to 3function Animate (ELE,JSON,FN) {//First Clear Timerclearinterval (Ele.timer); Ele.timer=setinterval (function () {//Opening and closing principle        var BOOL=true; //iterate through the properties and values, processing the JSON separately//attr = = k (key) target = = Json[k] (value)         for(varKinchJSON) {            //Four Parts            varLeader = parseint (GetStyle (ele,k)) | |0; //1. Get Step size            varStep = (Json[k]-Leader)/Ten; //2. Two processing stepsStep = step>0?Math.ceil (STEP): Math.floor (step); Leader= leader +step; //3. Assigning ValuesEle.style[k] = leader +"px"; //4. Clear the Timer//judgment: The difference between the target value and the current value is greater than the step size, you cannot jump out of the loop//Does not consider the case of decimals: the target location and the current position are not equal, you cannot clear the purge timer.             if(Json[k]!==leader) {                BOOL=false; }} console.log (1); //The bool value does not become false until all properties are at the specified position;        if(BOOL) {clearinterval (Ele.timer); //All programs have been executed and now the callback function can be executed.//only a callback function is passed to execute            if(FN) {fn (); }        }    },1);}//Gets the width height of the viewable area of the screenfunction 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 native 360 boot small animation