首頁 > 開發者 > JavaScript
標籤：log 20px json htm com meta 位置 技術 math
<!DOCTYPE html><html><head lang="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 () { // //需求：下面的盒子高度變為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 } }}
javascript原生360 開機小動畫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
