首頁網(wǎng)頁特效庫

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

滑動門通用代碼類

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("菜單層數(shù)量和內(nèi)容層數(shù)量不一樣!");
   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   id="xalzqer"   class="bodyer">
<h1 class="t_rt">滑動門封裝類</h1>
<h2>效果預(yù)覽</h2>
<div   id="4vwi22g"   class="preview">
<div   id="4wlctdu"   class="scrolldoorFrame">
<ul class="scrollUl">
    <li id="qohyr2w"    class="sd01" id="m01">滑動門</li>
    <li id="mk2wmxo"    class="sd02" id="m02">滑動門</li>
    <li id="xv9ovmx"    class="sd02" id="m03">滑動門</li>
    <li id="c9i2wne"    class="sd02" id="m04">滑動門</li>
    <li id="yx9bwi4"    class="sd02" id="m05">滑動門</li>
</ul>
<div   id="havm4m9"   class="bor03 cont">
<div   class="jhvk7rb"   id="c01">第一層內(nèi)容</div>
<div   id="kodtjbn"   class="hidden" id="c02">第二層內(nèi)容</div>
<div   id="lny2mex"   class="hidden" id="c03">第三層內(nèi)容</div>
<div   id="n9zerri"   class="hidden" id="c04">第四層內(nèi)容</div>
<div   id="v7y4zn9"   class="hidden" id="c05">第五層內(nèi)容</div>
</div>
</div>
</div>
<div   id="3s7mdoe"   class="preview">
<div   id="gctjwm4"   class="scrolldoorFrame">
<ul class="scrollUl">
    <li id="xzlbocq"    class="sd01" id="mm01">滑動門</li>
    <li id="lncrjwl"    class="sd02" id="mm02">滑動門</li>
    <li id="9rjaqcn"    class="sd02" id="mm03">滑動門</li>
    <li id="tv2l2k4"    class="sd02" id="mm04">滑動門</li>
    <li id="npbrgtl"    class="sd02" id="mm05">滑動門</li>
</ul>
<div   id="7j4x9c9"   class="bor03 cont">
<div   class="fbtkx2g"   id="cc01">第一層內(nèi)容</div>
<div   id="ihwmbri"   class="hidden" id="cc02">第二層內(nèi)容</div>
<div   id="ecshxm4"   class="hidden" id="cc03">第三層內(nèi)容</div>
<div   id="rvjyrjx"   class="hidden" id="cc04">第四層內(nèi)容</div>
<div   id="m2xe2dk"   class="hidden" id="cc05">第五層內(nèi)容</div>
</div>
</div>
</div>
<div   id="qtkb4pp"   class="preview">
<div   id="y42cv9u"   class="scrolldoorFrame">
<ul class="scrollUl">
    <li id="banewmy"    class="sd01" id="mmm01">滑動門</li>
    <li id="gkz9qgy"    class="sd02" id="mmm02">滑動門</li>
    <li id="7qhvobp"    class="sd02" id="mmm03">滑動門</li>
    <li id="m2upgth"    class="sd02" id="mmm04">滑動門</li>
    <li id="cdpe4j9"    class="sd02" id="mmm05">滑動門</li>
</ul>
<div   id="a2hxpgv"   class="bor03 cont">
<div   class="ssix99s"   id="ccc01">第一層內(nèi)容</div>
<div   id="zd2i9qs"   class="hidden" id="ccc02">第二層內(nèi)容</div>
<div   id="rvfw77c"   class="hidden" id="ccc03">第三層內(nèi)容</div>
<div   id="qna1j9j"   class="hidden" id="ccc04">第四層內(nèi)容</div>
<div   id="t7g7ro9"   class="hidden" id="ccc05">第五層內(nèi)容</div>
</div>
</div>
</div>
</div>
<p>本代碼由<a href="http://well-network.com">資料庫網(wǎng)頁特效</a>提供</p>

相關(guān)特效代碼

熱門特效代碼: 彈出式窗口代碼生成器; 自動刷新網(wǎng)頁代碼; 在狀態(tài)欄中顯示停留時間; 根據(jù)不同的分辨率自動采用預(yù)設(shè)的; 點擊彈出窗口層背景變暗; 每個IP每天只彈一次的窗口; 打開瀏覽器窗口最大化效果; N秒后不詢問自動關(guān)閉窗口; 自由控制打開的窗口; 框架加載時的loading效果，兼容F

推薦特效代碼: 每個IP每天只彈一次的窗口; 打開瀏覽器窗口最大化效果; N秒后不詢問自動關(guān)閉窗口; 點擊打印網(wǎng)頁代碼; 變色的表格框; 漂亮的CSS園角效果

<center id="hcvlw"><label id="hcvlw"></label></center>