html:

 

代码
<ul class="scrollUl">
    
<li id="m01" class="sd01" value="0"><href="#">新服排期</a></li>
    
<li id="m02" class="sd02" value="1"><href="#">官方公告</a></li>
</ul>

<div id="c01" style="display: block;">
    
<ul>
        
<li class="ml10 mt10"><span class="fu"><title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    
</ul>
</div>
<div class="hidden" id="c02" style="display: none;">
    
<ul>
        
<li class="ml10 mt10"><span class="fu"><title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        
<li class="ml10"><span class="fu"><title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
     
</ul>
</div>

 

 

js:

 

代码
function scrollDoor(){
}
scrollDoor.prototype 
= {
    sd : 
function(menus,divs,openClass,closeClass){
        
var _this = this;
        
if(menus.length != divs.length)
        {
            alert(
"菜单层数量和内容层数量不一样!");
            
return false;
        }
        
for(var i = 0 ; i < menus.length ; i++)
        {
            _this.$(menus[i]).value 
= i;
            _this.$(menus[i]).onmouseover 
= function(){
                
//1.先关闭所有的导航和内容:
                for(var j = 0 ; j < menus.length ; j++)
                {
                    _this.$(menus[j]).className 
= closeClass;
                    _this.$(divs[j]).style.display 
= "none";
                }
                
//2.打开当前的导航和内容:
                //_this.$(menus[this.value]).className = openClass;
                this.className = openClass;
                _this.$(divs[
this.value]).style.display = "block";
            }
        }
    },
    $ : 
function(oid){
        
if(typeof(oid) == "string")
        
return document.getElementById(oid);
        
return oid;
    }
}
window.onload 
= function(){
    
var SDmodel = new scrollDoor();
    SDmodel.sd([
"m01","m02"],["c01","c02"],"sd01","sd02");
    
//SDmodel.sd(["m001","m002"],["c001","c002"],"sd01","sd02");
}

 

 

 

posted on 2010-09-30 10:24  小炒花生米  阅读(1922)  评论(0编辑  收藏  举报