产品推广 公司博客 创业心态 常见问题 百度快照排名 网站建设 网站运营 网络营销 营销型网站

可以多次使用的滑动门

网站建设

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>滑动门通用JS</title>
<style type=”text/css”>
<!–
body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}
.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}
.t_rt{text-align:right;}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}
ul,li{margin:0px;padding:0px;}
li{list-style-type:none;}
h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}
.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
h2{margin:0px 10px;background:#ccc;padding:5px;}
.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}
.scrolldoorFrame{width:400px;margin:0px auto;overflow:hidden;}
.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}
.scrollUl li{float:left;}
.bor03{border:1px solid #ccc;border-top-width:0px;}
.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}
.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}
–>
</style>
<script type=”text/javascript”>
/*
十三妖
qq:36339194
www.admincss.com整理收集
邮箱:ktzzx@163.com
*/
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>
</head>
<body>
<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 id=”c02″ class=”hidden”>
第二层内容
</div>
<div id=”c03″ class=”hidden”>
第三层内容
</div>
<div id=”c04″ class=”hidden”>
第四层内容
</div>
<div id=”c05″ class=”hidden”>
第五层内容
</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 id=”cc02″ class=”hidden”>
第二层内容
</div>
<div id=”cc03″ class=”hidden”>
第三层内容
</div>
<div id=”cc04″ class=”hidden”>
第四层内容
</div>
<div id=”cc05″ class=”hidden”>
第五层内容
</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 id=”ccc02″ class=”hidden”>
第二层内容
</div>
<div id=”ccc03″ class=”hidden”>
第三层内容
</div>
<div id=”ccc04″ class=”hidden”>
第四层内容
</div>
<div id=”ccc05″ class=”hidden”>
第五层内容
</div>
</div>
</div>
</div>

<h2>
源代码
</h2>

<div class=”textDiv”>
<textarea id=”sourse”>
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;
}
}
</textarea>
</div>

<h2>
使用方法
</h2>

<div class=”preview”>
1.把以上代码引进你的页面 &lt;script type=”text/javascript” src=”scrollDoor.js”&gt;&lt;/script&gt;<br/>
2.在页面的”&lt;body&gt;”标签前加入以下代码:<br/>
<div class=”example”>
&lt;script type=”text/javascript”&gt;<br/>
var SDmodel = new scrollDoor(); <br/>
SDmodel.sd([菜单id数组],[显示层id数组],”菜单触发类”,”菜单关闭类”);<br/>
SDmodel.sd([菜单id数组2],[显示层id数组2],”菜单触发类”,”菜单关闭类”);<br/>
SDmodel.sd([菜单id数组3],[显示层id数组3],”菜单触发类”,”菜单关闭类”);<br/>
&lt;/script&gt;
</div>
其中sd方法中的参数为:<br/>
参数一 [菜单id数组]:滑动门菜单的id<br/>
参数二 [内容id数组]:显示和隐藏滑动内容层的id<br/>
参数三 “菜单触发类”:鼠标经过滑动门菜单的类<br/>
参数四 “菜单关闭类”:鼠标滑出滑动门菜单的类<br/>
3.页面中有几个滑动门就调用几次sd函数,只需改变sd调用的参数,如以上代码上所展示.

</div>

</div>
</body>
</html>

http://www.xieguang133.com/

继续阅读