一个滑动门代码

mlliqiushi 2009-09-29 10:26:17 
<!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">

.lmbk2 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; PADDING-BOTTOM: 20px; PADDING-TOP: 10px;width:1002px;}

#swfplayer {MARGIN: 10px 0px}

.bk {

	border: 1px solid #CCCCCC;

}

body{margin:0px;padding:0px; FONT-FAMILY: "宋体";font-size:12px;background:#fff;line-height:38px;}

ul,li{margin:0px;padding:0px;}

.hidden{display:none;}

.scrolldoorFrame{width:491px;margin:0px auto;overflow:hidden;BACKGROUND: url(nnn_9.jpg) repeat-x;}

.scrollUl{width:491px;border-bottom:1px solid #fff;overflow:hidden;height:39px;}

.scrollUl li{float:left;}

.bor03{border:0px solid #ccc;border-top-width:0px;height:186px;width:616px;  FONT-FAMILY: "宋体";font-size:12px;}

.sd01{cursor:pointer;border:0px solid #CCC;BACKGROUND: url(nnn_7.jpg) no-repeat center 100%;margin:2px;padding:4px;font-weight:bold; width:60px;  FONT-FAMILY: "宋体";font-size:12px;}

.sd02{cursor:pointer;border:0px solid #CCC;margin:2px;padding:4px;width:60px;  FONT-FAMILY: "宋体";font-size:12px;}

TD

{

	font-size : 14px;

	color : #000000;

	line-height : 26px;

}

A:link

{

	color : #003399;

	text-decoration : none;

}

A:visited

{

	color : #003399;

	text-decoration : none;

}

A:hover

{

	color : #cd1b00;

	text-decoration : none;

	font-size : 12;

}

A.w:link

{

	COLOR: #ffffff

}

A.w:visited

{

	COLOR: #ffffff

}

A.w:hover

{

	COLOR: #f3df59

}

A.hb:link

{

	FONT-SIZE: 18px; COLOR: #7f7f7f

}

A.hb:visited

{

	FONT-SIZE: 18px; COLOR: #7f7f7f

}

A.hb:hover

{

	FONT-SIZE: 18px; COLOR: #f16b1a

}

A.h:link

{

	COLOR: #7f7f7f

}

A.h:visited

{

	COLOR: #7f7f7f

}

A.h:hover

{

	COLOR: #f16b1a

}

A.hong:link

{

	COLOR: #ff0000

}

A.hong:visited

{

	COLOR: #ff0000

}

A.hong:hover

{

	COLOR: #ff9c00

}

A.sh:link

{

	COLOR: #4c4c4c

}

A.sh:visited

{

	COLOR: #4c4c4c

}

A.sh:hover

{

	COLOR: #f16b1a

}

A.ah:link

{

	COLOR: #a50009

}

A.ah:visited

{

	COLOR: #a50009

}

A.ah:hover

{

	COLOR: #f16b1a

}

.105v

{

	font-weight : normal;

	font-size : 18pt;

	color : #000000;

	font-family : 微软雅黑, tahoma, arial, helvetica;

	text-decoration : none;

	letter-spacing : 4px;

}

.TITLE1

{

	font-size : 16 pt;

	color : #ffffff;

	line-height : 26px;

	font-weight : bold;

	letter-spacing : 4px;

}

.scrolldoorFrame1{width:268px;margin:0px auto;overflow:hidden;BACKGROUND: url(nnnn_9.jpg) repeat-x;}

.scrollUl1{width:268px;border-bottom:1px solid #fff;overflow:hidden;height:35px;}

.scrollUl1 li{float:left;}

.bor031{border:0px solid #ccc;border-top-width:0px;height:199px;width:268px;  FONT-FAMILY: "宋体";font-size:12px;}

.sd011{cursor:pointer;border:0px solid #CCC;BACKGROUND: url(nnnn_7.jpg);margin:0px;padding:3px;font-weight:bold; width:65px;  FONT-FAMILY: "宋体";font-size:12px; }

.sd021{cursor:pointer;border:0px solid #CCC;margin:0px;padding:3px;width:65px; color : #ffffff; FONT-FAMILY: "宋体";font-size:12px;}

.scrolldoorFrame2{width:268px;margin:0px auto;overflow:hidden;BACKGROUND: url(nnnn_9.jpg) repeat-x;}

.scrollUl2{width:268px;border-bottom:1px solid #fff;overflow:hidden;height:35px;}

.scrollUl2 li{float:left;}

.bor032{border:0px solid #ccc;border-top-width:0px;height:199px;width:268px;  FONT-FAMILY: "宋体";font-size:12px;}

.sd012{cursor:pointer;border:0px solid #CCC;BACKGROUND: url(nnnn_7.jpg);margin:0px;padding:3px;font-weight:bold; width:65px;  FONT-FAMILY: "宋体";font-size:12px; }

.sd022{cursor:pointer;border:0px solid #CCC;margin:0px;padding:3px;width:65px; color : #ffffff; FONT-FAMILY: "宋体";font-size:12px;}

.scrolldoorFrame3{width:268px;margin:0px auto;overflow:hidden;BACKGROUND: url(nnnn_9.jpg) repeat-x;}

.scrollUl3{width:268px;border-bottom:1px solid #fff;overflow:hidden;height:35px;}

.scrollUl3 li{float:left;}

.bor033{border:0px solid #ccc;border-top-width:0px;height:199px;width:268px;  FONT-FAMILY: "宋体";font-size:12px;}

.sd013{cursor:pointer;border:0px solid #CCC;BACKGROUND: url(nnnn_7.jpg);margin:0px;padding:3px;font-weight:bold; width:65px;  FONT-FAMILY: "宋体";font-size:12px; }

.sd023{cursor:pointer;border:0px solid #CCC;margin:0px;padding:3px;width:65px; color : #ffffff; FONT-FAMILY: "宋体";font-size:12px;}

.scrolldoorFrame4{width:268px;margin:0px auto;overflow:hidden;BACKGROUND: url(nnnn_9.jpg) repeat-x;}

.scrollUl4{width:268px;border-bottom:1px solid #fff;overflow:hidden;height:35px;}

.scrollUl4 li{float:left;}

.bor034{border:0px solid #ccc;border-top-width:0px;height:199px;width:268px;  FONT-FAMILY: "宋体";font-size:12px;}

.sd014{cursor:pointer;border:0px solid #CCC;BACKGROUND: url(nnnn_7.jpg);margin:0px;padding:3px;font-weight:bold; width:65px;  FONT-FAMILY: "宋体";font-size:12px; }

.bk {

	border: 1px solid #CCCCCC;

}

.sd024{cursor:pointer;border:0px solid #CCC;margin:0px;padding:3px;width:65px; color : #ffffff; FONT-FAMILY: "宋体";font-size:12px;}

.STYLE1 {color: #1D53B8}

</style>

<script type="text/javascript">

function setTab(name,cursel,n){ 

for(i=1;i<=n;i++){ 

  var menu=document.getElementById(name+i); 

  var con=document.getElementById("con_"+name+"_"+i); 

  menu.className=i==cursel?"hover":""; 

  con.style.display=i==cursel?"block":"none"; 

  

} 

}

</script>

</head>

<body>

<table width="635" border="0" cellspacing="0" cellpadding="0" align="center">

                              <tr>

                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">

                                    <tr>

                                      <td width="12"><img src="index_58.gif" width="10" height="40" alt="" /></td>

                                      <td width="616">

				<div class="scrolldoorFrame">

			<ul class="scrollUl STYLE1">

				<li class="sd01" id="one1" onmouseover="setTab('one',1,8)">推荐班级</li>

				<li class="sd02" id="one2" onmouseover="setTab('one',2,8)">国外考试</li>

				<li class="sd02" id="one3" onmouseover="setTab('one',3,8)">POP少儿</li>

				<li class="sd02" id="one4" onmouseover="setTab('one',4,8)">中学英语</li>

				<li class="sd02" id="one5" onmouseover="setTab('one',5,8)">口语</li>

                <li class="sd02" id="one6" onmouseover="setTab('one',6,8)">新概念</li>

                <li class="sd02" id="one7" onmouseover="setTab('one',7,8)">U-CAN</li>

                <li class="sd02" id="one8" onmouseover="setTab('one',8,8)">多语种</li>

			</ul>

		</div></td>

                                      <td width="8"><img src="index_68.gif" width="135" height="40" alt="" /></td>

                                    </tr>

                                </table></td>

                              </tr>

                              <tr>

                                <td><table width="98%" border="0" cellspacing="0" cellpadding="0">

                                    <tr>

                                      <td width="2%"><img src="index_69.gif" width="12" height="186" alt="" /></td>

                                      <td width="65%">

              <div class="bor03 cont">

				<div id="con_one_1" >

					<img src="index_122.gif" />

				</div>

				<div id="con_one_2"  class="hidden">

					<img src="01.jpg" />

				</div>

				<div id="con_one_3"  class="hidden">

					第三层内容

				</div>

				<div id="con_one_4"  class="hidden">

					第四层内容

				</div>

				<div id="con_one_5"  class="hidden">

					第五层内容

				</div>

                <div id="con_one_6"  class="hidden">

					第6层内容

				</div>

                <div id="con_one_7"  class="hidden">

					第7层内容

				</div>

                <div id="con_one_8"  class="hidden">

					第8层内容

				</div>

			</div></td>

                                      <td width="33%"><img src="index_71.gif" width="8" height="186" alt="" /></td>

                                    </tr>

                                </table></td>

                              </tr>

                              <tr>

                                <td><img src="index_72.gif" width="636" height="17" alt="" /></td>

                              </tr>

                              <tr>

                                <td valign="top"><img src="index_76.gif" width="636" height="7" alt="" /></td>

                              </tr>

                          </table>

</body>

</html>

一个滑动门代码，现在有个问题，我一把鼠标悬停在选项里，字就全堆到一起了，希望大家给解决下，谢谢了，回者都有分
...全文
171 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
lalan6 2009-09-29
  • 打赏
  • 举报
 回复
站个位..一会来慢慢看
mlliqiushi 2009-09-29
  • 打赏
  • 举报
 回复
帮帮忙 哦！~
BeenZ 2009-09-29
  • 打赏
  • 举报
 回复
先站个坑,慢慢看
hhx_1120 2009-09-29
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 xiaofan_sap 的回复:]
menu.className=(i==cursel?"hover":"？？？？？？");
美女  这句话有问题啊 ，不能为空，你应该让他们保持在你的初始样式才可以
[/Quote]

嗯嗯 也就是楼上这位朋友提到的，主要是你在这段JS代码中把CLASS给清楚了的原因
hhx_1120 2009-09-29
  • 打赏
  • 举报
 回复

你看下你的这串代码：
<ul class="scrollUl STYLE1">
<li class="sd01" id="one1" onmouseover="setTab('one',1,8)">推荐班级</li>
<li class="sd02" id="one2" onmouseover="setTab('one',2,8)">国外考试</li>
<li class="sd02" id="one3" onmouseover="setTab('one',3,8)">POP少儿</li>
<li class="sd02" id="one4" onmouseover="setTab('one',4,8)">中学英语</li>
<li class="sd02" id="one5" onmouseover="setTab('one',5,8)">口语</li>
<li class="sd02" id="one6" onmouseover="setTab('one',6,8)">新概念</li>
<li class="sd02" id="one7" onmouseover="setTab('one',7,8)">U-CAN</li>
<li class="sd02" id="one8" onmouseover="setTab('one',8,8)">多语种</li>
</ul>
默认时每个li标签都是有引用Class的，但是当鼠标移上去后，每个li的Class就被你清除掉了，你是在class样式中设置的li宽度，所以，当class被清除后，因为li没了宽度，所以它们就被挤在一起了。

嘻嘻.. 不知俺表达的是否清楚？


xiaofan_sap 2009-09-29
  • 打赏
  • 举报
 回复
menu.className=(i==cursel?"hover":"？？？？？？");
美女 这句话有问题啊 ，不能为空，你应该让他们保持在你的初始样式才可以
sdlyczl 2009-09-29
  • 打赏
  • 举报
 回复
学习
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
鼠标点击滑动门代码
鼠标点击滑动门代码
仿百度地图app，js制作H5中的滑动面板
实战实例使用js制作H5的滑动面板，仿照移动端APP百度地图点击地点后弹出的滑动面板，代码可以直接使用，并且已经实现组件化，视频对代码有详细的讲解，逻辑与分析的讲解，提供全部代码的下载。 对于有类似开发需求的...
滑动门代码
滑动门代码
不同风格的Tab滑动门代码+图片
不同风格的Tab滑动门代码
CSS

61,115

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章