求一种 JS 效果，就是，点击一下按钮，会 “向下”展开所有图片，再次点击 按钮，会“向上”收起恢复原位
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求一种 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;
imgmax-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文件 参考技术B 你可以自己用 jquery 写个简单的 放一个div 默认隐藏 点击按钮时 在js中改div的display属性为block 就可以了追问
你好！这不是简单的div显示和隐藏，是一种 div框 向下拉长 和 向上还原！这种效果，你在 什么网站上还见过？请求帮助
追答jquery动画效果 用 slideUp() 和 slideDown() 是很容易实现的
本回答被提问者采纳 参考技术C 搜索下JQueryUI。有你需要的追问你好！这种 效果，你在什么网站上见过？网址 请发给我！
以上是关于求一种 JS 效果，就是，点击一下按钮，会 “向下”展开所有图片，再次点击 按钮，会“向上”收起恢复原位的主要内容，如果未能解决你的问题，请参考以下文章