熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

jquery簡單的div顯示和隱藏特效

2022-06-13   來源: Javascript 

  <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "://wwwworg//xhtml"> <head> <meta httpequiv="ContentType" content="text/html; charset=utf" /> <title>無標題文檔</title> <script src="jquery_lastjs" type="text/javascript"></script> <script type="text/javascript"> $(document)ready( function(){}); function hiden(){ $("#divObj")hide();//hide()函數實現隱藏括號裡還可以帶一個時間參數(毫秒) 例如hide()以毫秒的速度隱藏還可以帶slowfast } function slideToggle(){ $("#divObj")slideToggle();//窗簾效果的切換點一下收點一下開參數可以無參數說明同上 } function show(){ $("#divObj")show();//顯示參數說明同上 } function toggle(){ $("#divObj")toggle();//顯示隱藏切換參數可以無參數說明同上 } function slide(){ $("#divObj")slideDown();//窗簾效果展開 } </script> </head> <body> <h>div裡內容的顯示隱藏特效</h> <input type="button" value="隱藏" onclick="hiden()"/> <input type="button" value="顯示" onclick="show()"/> <input type="button" value="窗簾效果顯示" onclick="slide()"/> <input type="button" value="窗簾效果的切換" onclick="slideToggle()"/> <input type="button" value="隱藏顯示效果切換" onclick="toggle()"/> <div id="divObj" style="display:none"> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> 測試例子<br/> </div> </body> </html>


From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25504.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.