通過js控制層的動態隱藏
阿新 • • 發佈：2017-06-20
name 通過 fse head isp blog height 隱藏 function
<style type="text/css"> #dv1{ width:1000px; height:1000px; overflow:hidden; display:none; } </style> <script type="text/javascript"> window.onload = function () { document.getElementById(‘btn2‘).onclick = function() { //1啟動計時器 var inter= setInterval(function () { //2獲取要操作的層 var dvobj = document.getElementById(‘dv1‘); //3高度遞減 var h = dvobj.offsetHeight; h -= 3; if (h <= 0) { h= 0; //4把新的高度設置給層 dvobj.style.height = h + ‘px‘; dvobj.style.display = ‘none‘; clearInterval(inter); } else { dvobj.style.height = h + ‘px‘; } },100) } document.getElementById(‘btn1‘).onclick = function () { var dvobj = document.getElementById(‘dv1‘); if(dvobj.style.display.length==0){ dvobj.style.display = ‘none‘; this.value = ‘顯示‘; } else { dvobj.style.display = ‘‘; this.value = ‘隱藏‘; } } } </script> </head> <body> <input type="button" name="name" value="隱藏"id="btn1" /> <input type="button" name="name" value="通過動畫隱藏" id="btn2" /> <input type="button" name="name" value="通過動畫顯示" id="btn3" /> <div id="dv1"> <img src="Images/QQ圖片20170619233404.jpg" /> </div>
通過js控制層的動態隱藏