![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
//新版QQ菜单
var layerTop=0; //菜单顶边距
var layerLeft=0; //菜单左边距
var layerWidth=145; //菜单总宽
var titleHeight=26; //标题栏高度
var totalHeight=400; //总高度
var stepNo=8; //移动步数,数值越大移动越慢
var itemNo=0;//用以区分addItem()加入的div块
var runtimes=0;//移动步伐的重复次数
function DcMenu(){
this.itemTitles = new Array();
this.itemContents = new Array();
}
DcMenu.prototype.$=function(id){
return document.getElementById(id);
}
DcMenu.prototype.ToString=function(){
totalHeight = document.body.clientHeight-10;
var html = '<div style="height:480px;overflow:hidden;"><span id="itemsLayer" style="position:absolute;overflow:hidden;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">';
for(var i=0;i<itemNo;i+=1){
var contenHeight = totalHeight-itemNo*titleHeight;
html += '<div id=item'+i+' z-index='+i+' style="position:relative;left:0;top:'+(-(contenHeight*i))+';width:'+layerWidth+';">';
html += '<div class="titleStyle" onclick=changeItem('+i+')>'+this.itemTitles[i]+'</div>';
html += '<div class="contentStyle" id="menuTitle'+i+'" style="height:'+(contenHeight)+'px" >'+this.itemContents[i]+'</div>';
html += '</div>';
}
html += '</span></div>';
document.write(html);
//this.$('itemsLayer').style.height= totalHeight+"px";
toItemIndex=itemNo-1;
onItemIndex=itemNo-1;//此时toItemIndex=3,onItemIndex=3
}
DcMenu.prototype.addItem=function(itemTitle,itemContent){
this.itemTitles[itemNo] = itemTitle;
this.itemContents[itemNo]= itemContent;
// this.itemsHtml+='<div id=item'+itemNo+' z-index='+itemNo+' style="position:relative;left:0;top:'+(-((totalHeight-titleHeight)*itemNo))+';width:'+layerWidth+';">'+
// '<div class="titleStyle" onclick=changeItem('+itemNo+') align=center>'+itemTitle+'</div>'+
// '<div class="contentStyle" name="menuTitle" style="height:1px" >'+itemContent+'</div>'+
// '</div>';
itemNo+=1;
}
//添加菜单标题和内容,可任意多项,注意格式:
//此时itemNo的值为3,值是从0开始的
function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0){
moveUp();
}
else{
moveDown();
}
runtimes+=1;
if(runtimes>=stepNo){/*停止移动的条件*/
onItemIndex=toItemIndex;
runtimes=0;
}
else{
setTimeout("changeItem(toItemIndex)",10);/*不满足移动条件,则每10毫秒移动一次*/
}
}
function moveUp(){/*如果是从3-->0,则每次需要1,2,3三个item一起移动大小为contentHeight/stepNo的值*/
var contentHeight = totalHeight-itemNo*titleHeight;
for(i=onItemIndex+1;i<=toItemIndex;i+=1){
var stepLength = parseInt(contentHeight/stepNo);
if(runtimes==stepNo-1){
stepLength = parseInt(contentHeight/stepNo) + contentHeight -parseInt(contentHeight/stepNo) * stepNo;
}
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-stepLength;');/*contentHeight/stepNo为每次移动的大小,由你设定的stepNo值确定*/
}
}
function moveDown(){
var contentHeight = totalHeight-itemNo*titleHeight;
var stepLength = parseInt((contentHeight)/stepNo);
if(runtimes==stepNo-1){
stepLength = parseInt(contentHeight/stepNo) + contentHeight -parseInt(contentHeight/stepNo) * stepNo;
}
for(i=onItemIndex;i>toItemIndex;i-=1){
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+stepLength;');
}
}
DcMenu menu = new DcMenu();
menu.addItem('欢迎','<ul><li>★!!Collon Is Cool!!★</li></ul>');
menu.addItem('公司同事','<ul><li><a href="#">1:张三</a></li><li><a href="#">2:李四</a></li><li><a href="#">3:王五</a></li><li><a href="#">4:小明</a></li><li><a href="#">5:小王</a></li><li><a href="#">6:敦东东</a></li><li><a href="#">7:小可可</a></li><li><a href="#">8:大S</a></li><li><a href="#">9:刘德华</a></li><li><a href="#">10:黎明</a></li><li><a href="#">11:周华健</a></li><li><a href="#">12:郭富城</a></li><li><a href="#">13:田震</a></li></ul>');
menu. addItem('大学好友','<ul><li><a href="#">1:小猫猫</a></li><li><a href="#">2:东北虎</a></li><li><a href="#">3:华南虎</a></li></ul>');