求一种 JS 效果，就是，点击一下按钮，会 “向下”展开所有图片，再次点击 按钮，会“向上”收起恢复原位
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".z").click(function(){
$(".nav_shouqi").slideToggle("slow");
$(".s").show();
$(".z").hide();
});
$(".s").click(function(){
$(".nav_shouqi").slideUp("slow");
$(".z").show();
$(".s").hide();
});
});
</script>
<style>
body, div, p, th, td, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, dd, dl { margin: 0;padding: 0;}
body {color: #444444;font: 12px/1.2 Arial,"宋体",Verdana,Lucida,Helvetica,sans-serif;white-space: normal; background:url(../images/body_bg.jpg) top center no-repeat;}
*{margin:0;padding:0;border:0;}
dl, dt, dd, ul, ol, li {list-style-type: none;}
br {letter-spacing: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 12px;font-weight: normal;}
a:link, a:visited {color: #484848;text-decoration: none;}
a:hover {color: #CC0000;text-decoration: none;}
img {border: medium none;}
#wrap {font-size: 12px;height: auto;margin: 0 auto;width: 980px;}
.clr {clear: both;}
img{max-width:none;}
.nav{ width:500px; height:37px; background:url(images/nav_bg.jpg) repeat-x; padding-top:4px;}
.nav_zhankai{ width:66px; height:37px; line-height:37px; text-align:center; color:#ed610e; font-size:12px; margin:0px 217px 0 217px; cursor: pointer;}
.nav_shouqi{ width:500px; height:246px;}
.nav_top{ width:500px; height:19px; background:url(images/game_list_bg.png) 0 0 repeat-x; overflow:hidden;}
.nav_bot{ width:500px; height:20px; background:url(images/game_list_bg.png) 0 -20px repeat-x; overflow:hidden;}
.nav_mid{ width:500px; height:208px; background:url(images/game_list_bg2.png) repeat-x; overflow:hidden;}
.s{ width:66px; height:37px; background:url(images/bg_split.png) -36px -48px no-repeat; display:block;}
</style>
<body onload="MM_preloadImages('file:///C|/Users/yunhong.xie/Desktop/swczk_btn_ok.jpg')">
<div class="nav">
<div class="nav_zhankai">
<span class="z" >展开</span>
<span class="s"style="display:none">收起</span>
</div>
</div>
<div class="nav_shouqi" style="display:none">
<div class="nav_top"></div>
<div class="nav_mid"></div>
<div class="nav_bot"></div>
</div>
<div style="width:666px; height:105px; background:url(images/icons_48.png)"></div>
</body>
</html>
PS:自己的网上下个jquery.js文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".z").click(function(){
$(".nav_shouqi").slideToggle("slow");
$(".s").show();
$(".z").hide();
});
$(".s").click(function(){
$(".nav_shouqi").slideUp("slow");
$(".z").show();
$(".s").hide();
});
});
</script>
<style>
body, div, p, th, td, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, dd, dl { margin: 0;padding: 0;}
body {color: #444444;font: 12px/1.2 Arial,"宋体",Verdana,Lucida,Helvetica,sans-serif;white-space: normal; background:url(../images/body_bg.jpg) top center no-repeat;}
*{margin:0;padding:0;border:0;}
dl, dt, dd, ul, ol, li {list-style-type: none;}
br {letter-spacing: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 12px;font-weight: normal;}
a:link, a:visited {color: #484848;text-decoration: none;}
a:hover {color: #CC0000;text-decoration: none;}
img {border: medium none;}
#wrap {font-size: 12px;height: auto;margin: 0 auto;width: 980px;}
.clr {clear: both;}
img{max-width:none;}
.nav{ width:500px; height:37px; background:url(images/nav_bg.jpg) repeat-x; padding-top:4px;}
.nav_zhankai{ width:66px; height:37px; line-height:37px; text-align:center; color:#ed610e; font-size:12px; margin:0px 217px 0 217px; cursor: pointer;}
.nav_shouqi{ width:500px; height:246px;}
.nav_top{ width:500px; height:19px; background:url(images/game_list_bg.png) 0 0 repeat-x; overflow:hidden;}
.nav_bot{ width:500px; height:20px; background:url(images/game_list_bg.png) 0 -20px repeat-x; overflow:hidden;}
.nav_mid{ width:500px; height:208px; background:url(images/game_list_bg2.png) repeat-x; overflow:hidden;}
.s{ width:66px; height:37px; background:url(images/bg_split.png) -36px -48px no-repeat; display:block;}
</style>
<body onload="MM_preloadImages('file:///C|/Users/yunhong.xie/Desktop/swczk_btn_ok.jpg')">
<div class="nav">
<div class="nav_zhankai">
<span class="z" >展开</span>
<span class="s"style="display:none">收起</span>
</div>
</div>
<div class="nav_shouqi" style="display:none">
<div class="nav_top"></div>
<div class="nav_mid"></div>
<div class="nav_bot"></div>
</div>
<div style="width:666px; height:105px; background:url(images/icons_48.png)"></div>
</body>
</html>
PS:自己的网上下个jquery.js文件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以自己用 jquery 写个简单的 放一个div 默认隐藏 点击按钮时 在js中改div的display属性为block 就可以了
追问
你好！这不是简单的div显示和隐藏，是一种 div框 向下拉长 和 向上还原！这种效果，你在 什么网站上还见过？请求帮助
追答
jquery动画效果 用 slideUp() 和 slideDown() 是很容易实现的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
搜索下JQueryUI。有你需要的
追问
你好！这种 效果，你在什么网站上见过？网址 请发给我！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
