<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ 322px; position: fixed; bottom:0; right:0; } span{ position: absolute; top:0; right:0; 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")[0]; var oB=document.getElementById("b"); oClose.onclick=function(){ animate(oB,{"height":0},function(){ animate(oBox,{"width":0}); }); } } </script> </head> <body> <div class="box"> <span id="guanbi"></span> <div class="hd" id="t"> <img src="images/t.jpg" alt=""/> </div> <div class="bd" id="b"> <img src="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)) || 0; //1.获取步长 var step = (json[k] - leader)/10; //2.二次加工步长 step = step>0?Math.ceil(step):Math.floor(step); leader = leader + step; //3.赋值 ele.style[k] = leader + "px"; //4.清除定时器 //判断: 目标值和当前值的差大于步长，就不能跳出循环 //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。 if(json[k] !== leader){ bool = false; } } console.log(1); //只有所有的属性都到了指定位置，bool值才不会变成false； if(bool){ clearInterval(ele.timer); //所有程序执行完毕了，现在可以执行回调函数了 //只有传递了回调函数，才能执行 if(fn){ fn(); } } },1); } //获取屏幕可视区域的宽高 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 } } }