實用的層滑開js實現代碼

2019-11-21 01:01:05

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>實用的滑開層代碼</title> <script> var flag=0; function f_s(id){ var obj=document.getElementById(id); obj.style.display="block"; obj.style.height="1px"; var changeW=function(){               var obj_h=parseInt(obj.style.height); if(obj_h<=160){ obj.style.height=(obj_h+Math.ceil((160-obj_h)/10))+"px"; } else{ clearInterval(bw1); } } bw1= setInterval(changeW,1);      if(flag>0){           clearInterval(bw2);      } } function closeW(id){         flag++; var obj=document.getElementById(id); var closeDiv=function(){ clearInterval(bw1); var obj_h=parseInt(obj.style.height); if(obj_h>1){ obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";                      } else{ clearInterval(bw2); obj.style.display="none"; } } bw2= setInterval(closeDiv,1); } function showDiv(){     var ele = document.getElementById("div1");     clearInterval(bw1);     clearInterval(bw2);     ele.style.display = "block";     ele.style.height = 160 + "px";     } </script> <style type="text/css">  </style> </head> <body> <div   id="iwvjtn8m0"   class="c"> <ul> <li onmouseover="f_s('div1')" onmouseout="closeW('div1')">111</li> <li>222</li> <li>333</li> </ul> </div> <div   class="iwvjtn8m0"   id="div1" style="position:absolute;background:aqua;overflow:hidden;width:970px;display:none" onmouseover="showDiv()" onmouseout="closeW('div1')">000</div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：jQuery get和post 方法傳值注意事項

下一篇：純JS圖片批量預加載技術代碼