10
2009
10

发一段滑动门的代码,简洁易改,一个页面可以放多个滑动门

超实用通用滑动门代码,一个页面多个滑动门代码,简洁滑动门特效代码--------演示地址及下载地址:http://www.zhnao.com/download/huadongmen.html

这段css代码是控制滑动门属性的地方,如果要更换背景图片,或者滑动门尺寸大小,找到相应的代码修改即可。这是css代码:

<!--
body{margin:0px;padding:0px;font-size:12px;line-height:20px;}
.t_rt{text-align:right;}
ul,li{margin:0px;padding:0px;list-style-type:none;}
.preview{margin:10px;padding:10px;overflow:hidden}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #DEFAE6;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
.example{margin:10px;background:#FFF;border:1px dotted #ADDA9C;padding:10px;}
.scrolldoorFrame{width:326px;margin:0px auto;overflow:hidden;border:1px solid #e3e3e3;}
.scrollUl{width:326px;overflow:hidden;height:23px; border-bottom:#e3e3e3 solid 1px; background-image:url(images/btn_1.gif);}
.scrollUl li{float:left}
.bor03{border-top-width:0px;}
.st01{cursor:pointer; background-image:url(images/btn_2.gif);font-weight:bold; width:108px; text-align:center; color:#fff; height:23px; line-height:23px}
.st01 a{ color:#fff; text-decoration:none}
.st02{cursor:pointer;width:108px;text-align:center;height:23px; line-height:23px}
-->
——————————————————————————————————————————————————————分割线

如果增加滑动门,需要复制一部分属性,然后修改相对应代码,需要复制的css名有以下几个:

.scrolldoorFrame_1
.scrollUl_1
.scrollUl_1 li
.st01_1
.st01_1 a
.st02_1
.st05
.st05_hover

——————————————————————————————————————————————————————分割线

这是控制效果的js代码,复制过去就ok,添加的话需要改动的也就是最下面的那几行,后面有注释,添加时复制即可,当然也要修改id:

<script type="text/javascript">
function switchmodTag(){
}
switchmodTag.prototype = {
 st : 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(){//如果想把效果变成点击切换,将此行onmouseover 改成onclick即可。
     
    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 STmodel = new switchmodTag();
 STmodel.st(["a_1","a_2","a_3"],["c1_1","c1_2","c1_3"],"st01","st02");//第一组动滑轮
 STmodel.st(["b_1","b_2","b_3","b_4","b_5"],["c2_1","c2_2","c2_3","c2_4","c2_5"],"st01","st02");//第二组动滑轮
 STmodel.st(["c_1","c_2","c_3","c_4","c_5"],["c3_1","c3_2","c3_3","c3_4","c3_5"],"st01","st02");//第三组动滑轮
 STmodel.st(["d_1","d_2","d_3","d_4","d_5"],["c4_1","c4_2","c4_3","c4_4","c4_5"],"st01","st02");//第四组动滑轮
 //如需增加滑动门个数,请复制代码,ID命名规则如上即可。
}
</script>
——————————————————————————————————————————————————————分割线

 这就是html代码了:

<h5>一.如果想把效果变成点击切换,将JS代码中做标记的行onmouseover 改成onclick即可</h5>
 <h5>二.如果想增加滑动门个数,请查看JS代码中做标记的地方,ID命名规则如上即可</h5>
 <div class="preview">
  <div class="scrolldoorFrame">
   <ul class="scrollUl">
    <li class="st01" id="a_1"><a href="http://www.zhnao.com">新闻</a></li>
    <li class="st02" id="a_2"><a href="http://www.zhnao.com">财经</a></li>
    <li class="st02" id="a_3"><a href="http://www.zhnao.com">娱乐</a></li>
   </ul>
   <div class="bor03 cont">
    <div id="c1_1">
     新闻
    </div>
    <div id="c1_2" class="hidden">
     财经
    </div>
    <div id="c1_3" class="hidden">
     娱乐
    </div>
   </div>
  </div>
 </div>
 
 <div class="preview">
  <div class="scrolldoorFrame">
   <ul class="scrollUl">
    <li class="st01" id="b_1"><a href="http://www.zhnao.com">新闻</a></li>
    <li class="st02" id="b_2"><a href="http://www.zhnao.com">财经</a></li>
    <li class="st02" id="b_3"><a href="http://www.zhnao.com">娱乐</a></li>
    <li class="st02" id="b_4"><a href="http://www.zhnao.com">军事</a></li>
    <li class="st02" id="b_5"><a href="http://www.zhnao.com">生活</a></li>
   </ul>
   <div class="bor03 cont">
    <div id="c2_1">
     新闻
    </div>
    <div id="c2_2" class="hidden">
     财经
    </div>
    <div id="c2_3" class="hidden">
     娱乐
    </div>
    <div id="c2_4" class="hidden">
     军事
    </div>
    <div id="c2_5" class="hidden">
     生活
    </div>
   </div>
  </div>
 </div>
 
 <div class="preview">
  <div class="scrolldoorFrame">
   <ul class="scrollUl">
    <li class="st01" id="c_1"><a href="http://www.zhnao.com">新闻</a></li>
    <li class="st02" id="c_2"><a href="http://www.zhnao.com">财经</a></li>
    <li class="st02" id="c_3"><a href="http://www.zhnao.com">娱乐</a></li>
    <li class="st02" id="c_4"><a href="http://www.zhnao.com">军事</a></li>
    <li class="st02" id="c_5"><a href="http://www.zhnao.com">生活</a></li>
   </ul>
   <div class="bor03 cont">
    <div id="c3_1">
     新闻
    </div>
    <div id="c3_2" class="hidden">
     财经
    </div>
    <div id="c3_3" class="hidden">
     娱乐
    </div>
    <div id="c3_4" class="hidden">
     军事
    </div>
    <div id="c3_5" class="hidden">
     生活
    </div>
   </div>
  </div>
 </div>
 <div class="preview">
  <div class="scrolldoorFrame">
   <ul class="scrollUl">
    <li class="st01" id="d_1"><a href="http://www.zhnao.com">新闻</a></li>
    <li class="st02" id="d_2"><a href="http://www.zhnao.com">财经</a></li>
    <li class="st02" id="d_3"><a href="http://www.zhnao.com">娱乐</a></li>
    <li class="st02" id="d_4"><a href="http://www.zhnao.com">军事</a></li>
    <li class="st02" id="d_5"><a href="http://www.zhnao.com">生活</a></li>
   </ul>
   <div class="bor03 cont">
    <div id="c4_1">
     新闻
    </div>
    <div id="c4_2" class="hidden">
     财经
    </div>
    <div id="c4_3" class="hidden">
     娱乐
    </div>
    <div id="c4_4" class="hidden">
     军事
    </div>
    <div id="c4_5" class="hidden">
     生活
    </div>
   </div>
  </div>
 </div><h5>www.zhnao.com</h5>

如果感觉这样看着不方便,可以直接点击演示地址,把那个html文件下载下来分析即可。再发一次地址吧:

http://www.zhnao.com/download/huadongmen.html

« 上一篇下一篇 »

相关文章:

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。