知識要點
1.實現原理：
通過遞歸改變div的高度值達到緩慢下拉的效果。
2.一共分為3個步驟我寫了三個函數
第一個show()函數（下拉）：初始值高度h<300的話 h+5 反之return退出停止，調用setTimeout方法30毫秒執行一次+5
第二個hide()函數（收回）：只是高度的判斷不同高度h-5 反之return退出停止，調用setTimeout方法30毫秒執行一次-5
第三個dd()函數（再次彈出）：這里要注意的是第二次彈出的div是一個新的div把它的高度設置為0，實現原理與第一個函數一樣，
并且一定要在第二個函數（收回）執行后再執行
完整代碼
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style>body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:none;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}.clear{clear: both;float: none;height: 0;overflow: hidden;}#container{width: 600px; margin: 0 auto;}p{ line-height: 28px; }.hidden{background: #E6E6E6; text-align: center; height: auto; overflow: hidden;}.show{ background: #808080;text-align: center; height: 0; overflow: hidden; }</style> </head> <body> <div id="container"> <div class="hidden" id="hid"><p>廣告圖</p></div> <div class="show" id="sho"><p>哈哈哈哈改裝成功</p></div> </div> <script type="text/javascript"> window.onload=function aa(){ show(); setTimeout("hide()",3000); } var h=0; var hid=document.getElementById("hid"); var sho=document.getElementById("sho"); function show(){ if(h<300){ h+=5; hid.style.height=h+"px"; }else{ return; } setTimeout("show()",30); } function hide(){ if(h>0){ h-=5; hid.style.height=h+"px"; }else{ dd(); return; } setTimeout("hide()", 30); } var a=0; function dd(){ if(a<60){ a+=1; sho.style.height=a+"px"; }else{ return; } setTimeout("dd()",30); } </script></body> </html> 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
