打印

通用滑动门类内附使用说明。。。

本主题由 System 于 2008-4-4 05:00 解除限时高亮

thirdteendevil [楼主]

十三妖

高级会员

帖子: 267
体力: 643
威望: 2
当前: 北京西城区
离线: 18 天

专长 前端制作,JS

1^# 大中小发表于 2008-3-26 17:24

<!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">

</style>
<script type="text/javascript">
/*
十三妖
qq:181907667
msn:wl181907667@hotmail.com
邮箱:thirdteendevil@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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 thirdteendevil 于 2008-3-26 17:29 编辑 ]

本帖最近评分记录

caiying2007 威望 +1 不错,支持原创 2008-5-6 16:29

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

poppub

新手上路

帖子: 6
体力: 17
威望: 0
离线: 9 天

2^# 大中小发表于 2008-3-26 18:03

不错，收藏了

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

Firede

火德

初级会员

帖子: 83
体力: 138
威望: 0
当前: 北京朝阳区
离线: 2 天

专长 网页设计,前端制作,JS

3^# 大中小发表于 2008-3-26 18:17

这个不错，结构和行为分离的很好。
收下了

玛雅老班底：39454127

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

zxjxl918

新手上路

帖子: 8
体力: 18
威望: 0
离线: 16 天

4^# 大中小发表于 2008-3-26 21:32

不错的

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

yachuan520

天空飞扬的柳絮

中级会员

帖子: 160
体力: 288
威望: 10
当前: 上海闸北
离线: 2 天

专长 ASP,.NET,C#

5^# 大中小发表于 2008-3-27 09:57

谢谢LZ，收藏了。

TOP

netbrunt

初级会员

帖子: 82
体力: 137
威望: 0
离线: 189 天

6^# 大中小发表于 2008-3-27 10:27

谢谢了.，收藏了。..

TOP

voptxp2003

新手上路

帖子: 29
体力: 0
威望: 0
离线: 1 天

7^# 大中小发表于 2008-3-27 11:03

到底什么叫滑动门，什么叫TAG。。。晕啊

TOP

bc1998

新手上路

帖子: 81
体力: 42
威望: 3
当前: 天津南开
离线: 4 天

8^# 大中小发表于 2008-3-28 06:47

这叫滑动门吗

TOP

caicoko

初级会员

帖子: 127
体力: 161
威望: 0
离线: 127 天

9^# 大中小发表于 2008-3-28 10:58

封装的不够好，页面出现这么多id和class

TOP

rlog

勤劳的小男孩

中级会员

帖子: 254
体力: 395
威望: 3
当前: 北京海淀区
离线: 1 天

专长 网页设计,前端制作,JS

10^# 大中小发表于 2008-3-28 11:04

为什么到现在还有人把"滑动门"和"书签"混淆呢?

不过这个书签做的不错

Rlog

TOP

yatelu1

初级会员

帖子: 91
体力: 109
威望: 0
当前: 上海浦东

11^# 大中小发表于 2008-3-28 11:48

请教一个菜鸟问题，那如果要点击才切换内容的话，是不是要把onmouseover 改成onClick，就可以了？
我刚刚试了下没反应哈～

TOP

godkid

初级会员

帖子: 28
体力: 61
威望: 0
离线: 240 天

12^# 大中小发表于 2008-3-29 21:49

引用:

原帖由 yatelu1 于 2008-3-28 11:48 发表
请教一个菜鸟问题，那如果要点击才切换内容的话，是不是要把onmouseover 改成onClick，就可以了？
我刚刚试了下没反应哈～

可以的，你是不弄错了？

TOP

MarVell

高级会员

帖子: 778
体力: 766
威望: 0
当前: 河南洛阳
离线: 4 天

专长 前端制作

13^# 大中小发表于 2008-3-29 23:02

让唬进来了

滑动门是长这个样子么.........

不过代码挺整洁...好习惯

不在放荡中变坏,就在沉默中变态...

TOP

yw1688

初级会员

帖子: 87
体力: 188
威望: 0
当前: 广东中山
离线: 116 天

14^# 大中小发表于 2008-4-1 23:32

呵呵，我正想要这样的代码，管它是滑动门还是标签，收藏了。谢谢楼主分享。

TOP

MrShan

罐装曲奇

高级会员

帖子: 326
体力: 720
威望: 0
当前: 内蒙呼伦贝尔
离线: 12 天

专长 网页设计,前端制作,美编

15^# 大中小发表于 2008-4-2 00:37

收藏,感谢楼主.
学习ing...

TOP

synonymler

新手上路

帖子: 1
体力: 7
威望: 0
离线: 245 天

16^# 大中小发表于 2008-4-2 12:09

感谢楼主分享，

TOP

xinye

新手上路

帖子: 23
体力: 49
威望: 0
离线: 1 天

17^# 大中小发表于 2008-4-2 14:04

谢谢了.，收藏了。..

TOP

jsw0528

蓝蓝的神仙

高级会员

帖子: 519
体力: 859
威望: 0
当前: 江苏南京

专长 PHP,ASP,UE

18^# 大中小发表于 2008-4-2 14:17

我来发一个选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">

</style>
<script>

</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" onmouseover="setTab('one',1,4)" >新闻1</li>
   <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>
   <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>   
   <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">  
   <div id="zjj_one_1" >新闻列表1</div>
   <div id="zjj_one_2" style="display:none">新闻列表2</div>
   <div id="zjj_one_3" style="display:none">新闻列表3</div>
   <div id="zjj_one_4" style="display:none">新闻列表4</div> 
 </div>
</div>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" onclick="setTab('two',1,4)" >新闻1</li>
   <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
   <li id="two3" onclick="setTab('two',3,4)">新闻3</li>   
   <li id="two4" onclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">  
   <div id="zjj_two_1" >新闻列表1</div>
   <div id="zjj_two_2" style="display:none">新闻列表2</div>
   <div id="zjj_two_3" style="display:none">新闻列表3</div>
   <div id="zjj_two_4" style="display:none">新闻列表4</div> 
 </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

我一直用这个，很简洁，同页面可调用多次

[ 本帖最后由 jsw0528 于 2008-4-2 14:18 编辑 ]

承接ASP定制，http://08-if.cn/

TOP

91first

灰菜

中级会员

帖子: 226
体力: 410
威望: 0
当前: 福建福州
离线: 1 天

19^# 大中小发表于 2008-4-11 09:09

能不能加上cookies纪录 ?
谢谢

寂寞无处不在

TOP

lin04com

初级会员

帖子: 54
体力: 79
威望: 0
当前: 上海浦东

专长 网页设计,ASP,Access

20^# 大中小发表于 2008-4-13 12:55

引用:

原帖由 zxjxl918 于 2008-3-26 21:32 发表
不错的

谢谢，先收下了

TOP

zzy2010

新手上路

帖子: 1
体力: 7
威望: 0
当前: 广东深圳
离线: 222 天

21^# 大中小发表于 2008-4-25 14:05

收

了```不錯

TOP

Sandyluo

sandy2008

初级会员

帖子: 114
体力: 105
威望: 0
当前: 广东深圳

22^# 大中小发表于 2008-4-25 14:24

想要这个很久了，谢谢，收藏了！

安静！

TOP

probeprobe

新手上路

帖子: 13
体力: 34
威望: 0
离线: 3 天

23^# 大中小发表于 2008-4-25 22:35

还带使用说明，thx！

18楼也不错

TOP

pshuo1983

随心而去

银牌会员

帖子: 315
体力: 1186
威望: 0
当前: 北京海淀区
离线: 21 天

专长 前端制作

24^# 大中小发表于 2008-5-6 16:09

赞一个真不错

本人70%的帅30%的酷10%微量的羞涩
适用:18-25岁的女孩.
主治:心情不爽、极度狂拽、生活无聊
警告:长期服用会产生较严重的依赖性
稻草人

TOP

e4

初级会员

帖子: 50
体力: 86
威望: 0
离线: 30 天

25^# 大中小发表于 2008-5-6 16:13

收藏之前先谢楼主，太即时了！

TOP

stonevessel

新手上路

帖子: 2
体力: 9
威望: 0
当前: 北京海淀区
离线: 211 天

26^# 大中小发表于 2008-5-6 16:20

谢谢分享了

TOP

holyli

银牌会员

帖子: 418
体力: 1039
威望: 0
离线: 1 天

27^# 大中小发表于 2008-5-6 16:55

这个不错，结构和行为分离的很好。
收下了

先天下
www.xiantianxia.cn
www.futuremall.cn

TOP

ycsy520

中级会员

帖子: 113
体力: 231
威望: 0
当前: 广东深圳
离线: 2 天

28^# 大中小发表于 2008-5-6 17:26

从简洁、封装上来说，都不好，更不说通用。
自己会了，研究透了比什么通用都好。

如果你真的要的话，可以去看看cn.msn上的，那个修改下，还好点。

不写拉倒~

TOP

anglefeeling

新手上路

帖子: 18
体力: 34
威望: 0
离线: 5 天

29^# 大中小发表于 2008-5-29 10:16

顶楼主！实用的最好！

esun56.com

TOP

afeicool

难过

中级会员

帖子: 170
体力: 324
威望: 0
当前: 江苏南京
离线: 7 天

30^# 大中小发表于 2008-5-29 10:23

。。。原来滑动门是这样子的。

永恒国度｜写程序我不行.比帅气你不行。

TOP

通用滑动门类 内附使用说明。。。

引用:

引用:

通用滑动门类内附使用说明。。。