首页网页特效库

首页 > 特效 > 窗口页面 > 正文

滑动门通用代码类

2009-12-22 窗口页面 ℃

<p>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/css">
</style><script type="text/javascript">

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(){
     
    for(var j = 0 ; j < menus.length ; j++)
    {      
     _this.$(menus[j]).className = closeClass;
     _this.$(divs[j]).style.display = "none";
    }
    _this.$(menus[this.value]).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","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
 SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02");
 SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");
}
</script></p>
<div class="bodyer">
<h1 class="t_rt">滑动门封装类</h1>
<h2>效果预览</h2>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
    <li class="sd01" id="m01">滑动门</li>
    <li class="sd02" id="m02">滑动门</li>
    <li class="sd02" id="m03">滑动门</li>
    <li class="sd02" id="m04">滑动门</li>
    <li class="sd02" id="m05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="c01">第一层内容</div>
<div class="hidden" id="c02">第二层内容</div>
<div class="hidden" id="c03">第三层内容</div>
<div class="hidden" id="c04">第四层内容</div>
<div class="hidden" id="c05">第五层内容</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
    <li class="sd01" id="mm01">滑动门</li>
    <li class="sd02" id="mm02">滑动门</li>
    <li class="sd02" id="mm03">滑动门</li>
    <li class="sd02" id="mm04">滑动门</li>
    <li class="sd02" id="mm05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="cc01">第一层内容</div>
<div class="hidden" id="cc02">第二层内容</div>
<div class="hidden" id="cc03">第三层内容</div>
<div class="hidden" id="cc04">第四层内容</div>
<div class="hidden" id="cc05">第五层内容</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
    <li class="sd01" id="mmm01">滑动门</li>
    <li class="sd02" id="mmm02">滑动门</li>
    <li class="sd02" id="mmm03">滑动门</li>
    <li class="sd02" id="mmm04">滑动门</li>
    <li class="sd02" id="mmm05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="ccc01">第一层内容</div>
<div class="hidden" id="ccc02">第二层内容</div>
<div class="hidden" id="ccc03">第三层内容</div>
<div class="hidden" id="ccc04">第四层内容</div>
<div class="hidden" id="ccc05">第五层内容</div>
</div>
</div>
</div>
</div>
<p>本代码由<a href="http://www.zlcool.com">资料库网页特效</a>提供</p>

相关特效代码

热门特效代码: 弹出式窗口代码生成器; 自动刷新网页代码; 在状态栏中显示停留时间; 根据不同的分辨率自动采用预设的; 点击弹出窗口层背景变暗; 每个IP每天只弹一次的窗口; 打开浏览器窗口最大化效果; N秒后不询问自动关闭窗口; 自由控制打开的窗口; 框架加载时的loading效果，兼容F

推荐特效代码: 每个IP每天只弹一次的窗口; 打开浏览器窗口最大化效果; N秒后不询问自动关闭窗口; 点击打印网页代码; 变色的表格框; 漂亮的CSS园角效果