作为程序员,写代码不是最头疼的东西,而是...看懂别人的代码,并且修改别人的代码,最后达到自己想要的效果。不幸的是恰巧小弟遇到的就是这样一个问题...自己捣鼓了好久,实在是无能无力,哎...所以,希望高手们伸出援助之手,小弟感激不尽。
资源我已经上传到了这里,大家可以去下载看看,免积分的。大家不用担心。资源网址是:http://download.csdn.net/detail/zhizhuochangeing/4666266解压后里面有个三个文件夹:分别是:js, server, style 文件夹。其中在server文件夹里头有个叫layout1的Html页面,双击进去,然后就可以看见页面了。注意这个页面,右上角有个收缩的按钮图标,点击它,然后它会收缩那个DIV,那个DIV貌似是动态加载的,不太清楚...哎...收缩那个DIV后,它就变成了大概是35PX的蓝色背景的DIV了,在页面左侧Title2的下方有个叫 content2 addmenu 的这样一段文本,点击addmenu这个超链接,点击后,它会在刚才那个收缩后的只有35PX左右的DIV里头显示这样一段文字:欢迎您,admin管理员注销退出。现在问题来了,我想达到的效果是:就是第一步点击那个收缩按钮的时候,在那个大Div收上去的时候,就显示这一段文本:欢迎您,admin管理员注销退出,而不是...还要去点击 addmenu这个超链接 的时候 才把这段文本显示出来。而是在第一次直接在点收缩按钮的时候就显示出来这段文本,也就是省略第二步那个点击超链接的动作。不知道大神们是否听明白了小弟的需求,小弟不才,只有这样的口才了,呵。 如果大神们对需求还是不太清楚的,欢迎提出来。大神们,不好意思哦,文本有点长,请大神们耐心看完,小弟感激不尽,占用了大家的时间了,只是很急,所以...才大神们,改出来后,麻烦加上注释,哪里改动的,这样方便小弟学习。谢谢了,各位。感激不尽,不够分还可以再加。
感觉你说的东西很简单,
一个按钮,一个div,点击按钮控制div 显示和关闭。就这意思吧?如果不要动画效果,直接设置 display 就OK。
要动画效果,setTimeout 控制div 高度,(可以同时控制透明度)就ok
<!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"/>
<style type="text/css">
html,body{width:100%;height:100%;background-image:url(about:blank);background-attachment:fixed;}
ul,li{padding:0px;margin:0px;}
li
{
list-style: none outside none;float:left;display:inline; border:1px solid #ddd;text-align:center;overflow:hidden;
}
.divMainNV{width:800px;height:auto; overflow:hidden; margin:50px auto 0px;}
.op_btnDiv
{
width:800px;height:16px;margin:0px auto; text-align: -moz-center !important;text-align: center;
}
.main_list{width:800px;height:120px;}
.main_list li{width:158px;height:118px;line-height:118px;}
.nv_list{width:800px;height:120px;overflow:hidden;}
.nv_list li{width:78px;height:58px;line-height:58px;}.op_btn{
background: url("http://img.t.sinajs.cn/t4/x5style/images/nav/nav_bg.png?id=1350375249297") no-repeat scroll center -60px #F2F2F2;
border-color: #CECECE;
border-radius: 0 0 3px 3px;
border-style: solid;
border-width: 0 1px 1px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 1px 0 rgba(255, 255, 255, 0.1) inset;
display: block;
height: 16px;
width:60px;
line-height: 200px;
outline: medium none;
overflow: hidden;
}
.close{
background-position: center -60px;
} .open {
background-position: center -80px;
}
* html .fixed-top {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}.fixed-bottom {
position:fixed;
left:0px;
bottom:0px;
background:aqua;
width:100%;
height:50px;
}.fixed-top{
position:fixed;
top:0px;
left:0px;
background:blue;
width:100%;
height:50px;
}
</style></head>
<body>
<div class="fixed-top"></div>
<div class="divMainNV">
<ul class="main_list">
<li><a href="/21/cot">美食</a></li>
<li><a href="/21/cot">美食1</a></li>
<li><a href="/21/cot">美食2</a></li>
<li><a href="/21/cot">美食3</a></li>
<li><a href="/21/cot">美食4</a></li>
</ul>
<ul class="nv_list" id="nv_list">
<li><a suda-uatrack="key=topnav&value=class_1" href="/1/cot">美女</a></li>
<li><a suda-uatrack="key=topnav&value=class_2" href="/2/cot">帅哥</a></li>
<li><a suda-uatrack="key=topnav&value=class_4" href="/4/cot">体育</a></li>
<li><a suda-uatrack="key=topnav&value=class_6" href="/6/cot">游戏</a></li>
<li><a suda-uatrack="key=topnav&value=class_7" href="/7/cot">萌宠物</a></li>
<li><a suda-uatrack="key=topnav&value=class_8" href="/8/cot">动漫</a></li>
<li><a suda-uatrack="key=topnav&value=class_11" href="/11/cot">读书</a></li>
<li><a suda-uatrack="key=topnav&value=class_12" href="/12/cot">音乐</a></li>
<li><a suda-uatrack="key=topnav&value=class_16" href="/16/cot">军事</a></li>
<li><a suda-uatrack="key=topnav&value=class_17" href="/17/cot">历史</a></li>
<li><a suda-uatrack="key=topnav&value=class_19" href="/19/cot">美容发妆</a></li>
<li ><a suda-uatrack="key=topnav&value=class_20" href="/20/cot">母婴育儿</a></li>
<li><a suda-uatrack="key=topnav&value=class_22" href="/22/cot">健康</a></li>
<li><a suda-uatrack="key=topnav&value=class_25" href="/25/cot">家居</a></li>
<li><a suda-uatrack="key=topnav&value=class_26" href="/26/cot">摄影</a></li>
<li><a suda-uatrack="key=topnav&value=class_27" href="/27/cot">汽车</a></li>
<li><a suda-uatrack="key=topnav&value=class_28" href="/28/cot">艺术设计</a></li>
<li><a suda-uatrack="key=topnav&value=class_32" href="/32/cot">建筑</a></li>
<li><a suda-uatrack="key=topnav&value=class_33" href="/33/cot">婚嫁</a></li>
<li><a suda-uatrack="key=topnav&value=class_15" href="/15/cot">财经</a></li>
</ul>
<div class="clear:both;"></div>
</div>
<div class="op_btnDiv" ><a id="op_btn" class="op_btn close" href="javascript:;">打开</a></div>
<div class="fixed-bottom"></div>
</body>
<script type="text/javascript" src="Accordion.js" charset='utf-8'></script>
<script type="text/javascript">
var accordion = new __AccordionClass();
accordion.isMultiExpand = true; // 是否可已同时展开多个
accordion.initAccordion( [document.getElementById('op_btn')], [document.getElementById('nv_list')],"op_btn close","op_btn open");
accordion.expandFolded(0);
</script>
</html>
功能:滑动门(手风琴)效果封装类
作者:老胡
日期:2010-06-29
*/
function __AccordionClass()
{
this.isMultiExpand = false; // 是否允许多个同时展开
this.expandClassName =''; // 内容展开后的,头类名称
this.foldedClassName =''; // 内容折叠后的,头类名称
this.speedTime = 5 ; // 展开折叠速度 ,隔多少毫秒执行一次
this.speedCount=10 ; // 展开折叠渐变次数,多少次完成展开折叠
this.defaultExpandIndex = 0; // 默认展开的索引
var isIE = document.all?true:false;
var accordion=[]; //
var obj = null;
var accordionPan =function()
{
this.isExpand = true;
this.maxHeight=0;
this.timer=null;
this.header=null;
this.content = null;
};
this.initAccordion = function(headerList,contentList,exClassName,fdClassName)
{
if(headerList&&contentList&&headerList!=null&&contentList!=null&&headerList.length>0&&headerList.length==contentList.length){
obj = this;
for(var i=0;i<headerList.length;i++)
{
accordion[i] = new accordionPan();
accordion[i].maxHeight = contentList[i].offsetHeight;
accordion[i].header = headerList[i];
accordion[i].content = contentList[i];
accordion[i].content.style.overflow='hidden';
if(exClassName&&exClassName!=null&&exClassName!='')obj.expandClassName = exClassName;
if(fdClassName&&fdClassName!=null&&fdClassName!='')obj.foldedClassName = fdClassName;
obj.bindEvent(i);
}
if(!obj.isMultiExpand)
{
obj.expandFolded(obj.defaultExpandIndex);
}
}
};
this.bindEvent = function(i)
{
if(window.addEventListener){
accordion[i].header.addEventListener('click', function(e){ obj.expandFolded(i); },false);
}else{
accordion[i].header.attachEvent("onclick",function(){ obj.expandFolded(i); });
}
};
this.expandFolded = function(i)
{
if( accordion[i].isExpand)
{
if(obj.isMultiExpand)
{
clearInterval(accordion[i].timer);
accordion[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
}else{
for(var j=0;j<accordion.length;j++){
if(i!=j)obj.toFolded(j);
}
}
}
else
{
clearInterval(accordion[i].timer);
accordion[i].content.style.display='';
accordion[i].timer=setInterval(function(){obj.expand(i);},obj.speedTime);
if(!obj.isMultiExpand)
{
for(var j=0;j<accordion.length;j++){
if(i!=j)obj.toFolded(j);
}
}
}
};
this.toFolded = function(i){
clearInterval(accordion[i].timer);
accordion[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
};
this.expand=function(i)
{
var h = accordion[i].content.offsetHeight;
if(h<accordion[i].maxHeight)
{
var v = Math.round((accordion[i].maxHeight-h)/obj.speedCount);
v = (v<1) ? 1 :v ;
v+=h;
accordion[i].content.style.height=( v)+'px';
if(isIE){
accordion[i].content.style.filter= 'alpha(opacity='+(v*100/accordion[i].maxHeight)+');';
}else{
accordion[i].content.style.opacity = (v/accordion[i].maxHeight);
}
}else{
if(obj.expandClassName !='') accordion[i].header.className = obj.expandClassName ;
accordion[i].content.style.height=accordion[i].maxHeight +'px';
accordion[i].isExpand = true;
clearInterval(accordion[i].timer);
}
};
this.folded=function(i)
{
var h = accordion[i].content.offsetHeight;
if(h> 0)
{
var v = Math.round(h/obj.speedCount);
v = (v<1) ? 1 :v ;
accordion[i].content.style.height=(h - v)+'px';
v=(h - v)/accordion[i].maxHeight;
if(isIE){
accordion[i].content.style.filter= 'alpha(opacity='+(v*100)+');';
}else{
accordion[i].content.style.opacity = v;
}
}else{
if(obj.foldedClassName !='') accordion[i].header.className = obj.foldedClassName ;
accordion[i].content.style.height='0px';
accordion[i].content.style.display='none';
accordion[i].isExpand = false;
clearInterval(accordion[i].timer);
}
}
}
2:找到第3475行的_2aa(_29f,dir);
3:在它下面添加:addmenu();搞定