首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

仿qq导航菜单,显示高度有关问题

2012-02-26 
仿qq导航菜单,显示高度问题!以下是仿qq导航菜单源代码,varcontentHeight200//内容区高度,都是统一的,现

仿qq导航菜单,显示高度问题!
以下是仿qq导航菜单源代码,var   contentHeight=200;   //内容区高度,都是统一的,   现在我想让各个菜单下面的内容高度不是统一的,根据自己的要求设置高度,应该怎么处理啊!!
各位高手帮帮忙!!!谢谢了!!

演示地址:
http://www.sucai.com/texiaofile/69_view.htm


<html>  
<head>  
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 ">  
<title> 仿QQ导航菜单-www.51windows.Net </title>  
<style   type= "text/css ">  
.titleStyle{  
background-color:#008800;color:#ffffff;border-top:1px   solid   #FFFFFF;font-size:9pt;cursor:hand;  
}  
.contentStyle{  
background-color:#eeffee;color:blue;font-size:9pt;  
}  

a{  
color:blue;  
}  
body{  
font-size:9pt;  
}  
</style>  
</head>  
<body>  

<script   language= "JavaScript ">  
<!--  
var   layerTop=20;   //菜单顶边距  
var   layerLeft=30;   //菜单左边距  
var   layerWidth=140;   //菜单总宽  
var   titleHeight=20;   //标题栏高度  
var   contentHeight=200;   //内容区高度  
var   stepNo=10;   //移动步数,数值越大移动越慢  

var   itemNo=0;runtimes=0;  
document.write( ' <span   id=itemsLayer   style= "position:absolute;overflow:hidden;border:1px   solid   #008800;left: '+layerLeft+ ';top: '+layerTop+ ';width: '+layerWidth+ '; "> ');  

function   addItem(itemTitle,itemContent){  
itemHTML= ' <div   id=item '+itemNo+ '   itemIndex= '+itemNo+ '   style= "position:relative;left:0;top: '+(-contentHeight*itemNo)+ ';width: '+layerWidth+ '; "> <table   width=100%   cellspacing= "0 "   cellpadding= "0 "> '+  
' <tr> <td   height= '+titleHeight+ '   onclick=changeItem( '+itemNo+ ')   class= "titleStyle "   align=center> '+itemTitle+ ' </td> </tr> '+  
' <tr> <td   height= '+contentHeight+ '   class= "contentStyle "> '+itemContent+ ' </td> </tr> </table> </div> ';  
document.write(itemHTML);  
itemNo++;  
}  
//添加菜单标题和内容,可任意多项,注意格式:  
addItem( '欢迎 ', ' <BR>   欢迎光临设计在线! ');  
addItem( '网页陶吧 ', ' <center> <a   href= "# "> 网页工具 </a>   <BR> <BR> <a   href= "# "> 技术平台 </a>   <BR> <BR> <a   href= "# "> 设计理念 </a>   <BR> <BR> <a   href= "# "> 更多 </a> </center> ');  
addItem( '美工教室 ', ' <center> <a   href= "# "> 平面设计   </a>   <BR> <BR> <a   href= "# "> 三维空间 </a>   <BR> <BR> <a   href= "# "> 设计基础 </a>   <BR> <BR> <a   href= "# "> 更多.. </a> </center> ');  
addItem( 'Flash ', ' <center> <a   href= "# "> 基础教程 </a>   <BR> <BR> <a   href= "# "> 技巧运用 </a>   <BR> <BR> <a   href= "# "> 实例剖析 </a>   <BR> <BR> <a   href= "# "> 更多.. </a> </center> ');  


addItem( '多媒体 ', ' <center> <a   href= "# "> DIRECTOR </a>   <BR> <BR> <a   href= "# "> Authorware </a>   <BR> <BR> <a   href= "# "> 更多.. </a> </center> ');  
addItem( '精品赏析 ', ' <center> <a   href= "# "> 设计精品 </a> </center> ');  

document.write( ' </span> ')  
document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;  

toItemIndex=itemNo-1;onItemIndex=itemNo-1;  

function   changeItem(clickItemIndex){  
toItemIndex=clickItemIndex;  
if(toItemIndex-onItemIndex> 0)   moveUp();   else   moveDown();  
runtimes++;  
if(runtimes> =stepNo){  
onItemIndex=toItemIndex;  
runtimes=0;}  
else  
setTimeout( "changeItem(toItemIndex) ",10);  
}  

function   moveUp(){  
for(i=onItemIndex+1;i <=toItemIndex;i++)  
eval( 'document.all.item '+i+ '.style.top=parseInt(document.all.item '+i+ '.style.top)-contentHeight/stepNo; ');  
}  

function   moveDown(){  
for(i=onItemIndex;i> toItemIndex;i--)  
eval( 'document.all.item '+i+ '.style.top=parseInt(document.all.item '+i+ '.style.top)+contentHeight/stepNo; ');  
}  
changeItem(0);  
//-->  
</script>  
</body>  
</html>  

<div   style= "position:   absolute;   top:   10;   right:   10;   width:   148;   height:   18;cursor:hand ">  
<input   type= "button "   name= "Button "   value= "查看源代码 "   onClick=   'window.location   =   "view-source: "   +   window.location.href '> </div>

[解决办法]
代码太多了,懒得看啊
[解决办法]
不难呀,
只要在addItem函数中加上一个参数contentHeight。
每个要调用的传进来不同参数值就行了。

[解决办法]
关注中,帮顶~~
[解决办法]
你把 : var layerTop=20; //菜单顶边距
改成 : var layerTop=10; //菜单顶边距
就上去啦

热点排行