QQ菜单

//新版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>');