超实用通用滑动门代码,一个页面多个滑动门代码,简洁滑动门特效代码--------演示地址及下载地址: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文件下载下来分析即可。再发一次地址吧:
评论列表: