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

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

2013-11-15 11:59:54  來源: JSP教程 
本篇文章是對jquery中的div顯示和隱藏特效demo進行了詳細的分析介紹需要的朋友可以參考下   復制代碼 代碼如下:

  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<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/JSP/201311/20055.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.