jquery之div显示和隐藏、窗帘效果特效示例

简介:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2 None.gif < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3 None.gif < head >
 4 None.gif < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
 5 None.gif < title > 无标题文档 </ title >
 6 None.gif < script  src ="jquery_last.js"  type ="text/javascript" ></ script >
 7 ExpandedBlockStart.gif < script  type ="text/javascript" >
 8ExpandedSubBlockStart.gif$(document).ready(  function(){});
 9ExpandedSubBlockStart.giffunction hiden(){
10InBlock.gif$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
11ExpandedSubBlockEnd.gif}

12ExpandedSubBlockStart.giffunction slideToggle(){
13InBlock.gif$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
14ExpandedSubBlockEnd.gif}

15ExpandedSubBlockStart.giffunction show(){
16InBlock.gif$("#divObj").show();//显示,参数说明同上
17ExpandedSubBlockEnd.gif}

18ExpandedSubBlockStart.giffunction toggle(){
19InBlock.gif$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
20InBlock.gif
21ExpandedSubBlockEnd.gif}

22ExpandedSubBlockStart.giffunction slide(){
23InBlock.gif$("#divObj").slideDown();//窗帘效果展开
24ExpandedSubBlockEnd.gif}

25ExpandedBlockEnd.gif
26None.gif
</ script >
27 None.gif </ head >
28 None.gif
29 None.gif < body >
30 None.gif < h3 > div里内容的显示隐藏特效 </ h3 >
31 None.gif < input  type ="button"  value ="隐藏"  onclick ="hiden()" />
32 None.gif  < input  type ="button"  value ="显示"  onclick ="show()" />
33 None.gif  < input  type ="button"  value ="窗帘效果显示2"  onclick ="slide()" />
34 None.gif  < input  type ="button"  value ="窗帘效果的切换"  onclick ="slideToggle()" />
35 None.gif   < input  type ="button"  value ="隐藏显示效果切换"  onclick ="toggle()" />
36 None.gif < div  id ="divObj"  style ="display:none" >
37 None.gif        1.测试例子 < br />
38 None.gif        2.测试例子 < br />
39 None.gif        3.测试例子 < br />
40 None.gif        4.测试例子 < br />
41 None.gif        5.测试例子 < br />
42 None.gif        6.测试例子 < br />
43 None.gif        7.测试例子 < br />
44 None.gif        8.测试例子 < br />
45 None.gif        9.测试例子 < br />
46 None.gif        0.测试例子 < br />
47 None.gif     </ div > http://www.1410zk.com/
48 None.gif </ body >
49 None.gif </ html >
50 None.gif
复制代码



本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/archive/2011/06/12/2079255.html,如需转载请自行联系原作者
相关文章
|
1月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
10 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
28 1
|
1月前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
|
7月前
|
JavaScript
jQuery方式追加div覆盖
jQuery方式追加div覆盖
|
7月前
|
JavaScript
jquery实现下拉框选中对应的div
jquery实现下拉框选中对应的div
38 0
|
7月前
|
JavaScript
jQuery清空div内容
jQuery清空div内容
|
1月前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
13 0
|
1月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
50 0
|
7月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
35 0
|
7月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
35 0