javascript

位置:IT落伍者 >> javascript >> 浏览文章

jquery之超简单的div显示和隐藏特效demo


发布日期:2023年06月26日
 
jquery之超简单的div显示和隐藏特效demo
本篇文章是对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>

上一篇:js中widow.open()方法使用详解

下一篇:关于Javascript与iframe的那些事儿