<!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>
<FCK: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">
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">
京玉仕家工作室-济南网页设计-多滑动门共用一个js
</h1>
<h2>
效果预览
</h2>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="m01">A滑动门</li>
<li class="sd02" id="m02">A滑动门</li>
<li class="sd02" id="m03">A滑动门</li>
<li class="sd02" id="m04">A滑动门</li>
<li class="sd02" id="m05">A滑动门</li>
</ul>
<div class="bor03 cont">
<div id="c01">A第一层内容</div>
<div id="c02" class="hidden">A第二层内容</div>
<div id="c03" class="hidden">A第三层内容</div>
<div id="c04" class="hidden">A第四层内容</div>
<div id="c05" class="hidden">A第五层内容</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="mm01">B滑动门</li>
<li class="sd02" id="mm02">B滑动门</li>
<li class="sd02" id="mm03">B滑动门</li>
<li class="sd02" id="mm04">B滑动门</li>
<li class="sd02" id="mm05">B滑动门</li>
</ul>
<div class="bor03 cont">
<div id="cc01">B第一层内容</div>
<div id="cc02" class="hidden">B第二层内容</div>
<div id="cc03" class="hidden">B第三层内容</div>
<div id="cc04" class="hidden">B第四层内容</div>
<div id="cc05" class="hidden">B第五层内容</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="mmm01">C滑动门</li>
<li class="sd02" id="mmm02">C滑动门</li>
<li class="sd02" id="mmm03">C滑动门</li>
<li class="sd02" id="mmm04">C滑动门</li>
<li class="sd02" id="mmm05">C滑动门</li>
</ul>
<div class="bor03 cont">
<div id="ccc01">C第一层内容</div>
<div id="ccc02" class="hidden">C第二层内容</div>
<div id="ccc03" class="hidden">C第三层内容</div>
<div id="ccc04" class="hidden">C第四层内容</div>
<div id="ccc05" class="hidden">C第五层内容</div>
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
标题中的“一个页面多个滑动门”通常是指在网页设计中使用的一种交互效果，也称为“Tab切换”或“滑动面板”。这种效果允许在有限的屏幕空间内展示多个独立的内容区域，用户可以通过点击不同的标签来切换显示的内容...
标题"同一个页面多个滑动门"暗示我们将探讨如何在同一个网页上实现并管理多个独立的滑动门效果。 滑动门的基本原理是利用CSS（层叠样式表）和JavaScript（或jQuery等库）来控制HTML元素的显示和隐藏。通常，一个...
但这种方法在处理多个滑动门时可能会变得复杂，尤其是在需要更改样式或者添加新按钮时。此时，JavaScript就派上了用场，它能提供更灵活的动态控制。 首先，我们需要一个基础的HTML结构，这通常包括一个或多个用于...
为了在一个页面上实现多个滑动门，我们需要一个函数来处理所有的滑动门元素。这个函数可以遍历DOM，找到所有相关的滑动门元素，然后为每个元素绑定事件监听器。事件可以是`mouseover`（鼠标滑过）、`mouseout`（鼠标...
在"JS+CSS多个滑动门重复调用封闭类"这个项目中，我们将深入探讨这个技术及其应用。 首先，滑动门的概念源自于中国古代建筑中的门设计，它允许门的部分区域独立开启和关闭。在网页设计中，滑动门效果通常用于菜单项...
同一网页使用多个滑动门（选项卡）的方法
例如，可以创建多个滑动门元素，并通过JavaScript控制它们的滑动同步，或者实现多级导航菜单。 5. **文件结构**： 压缩包文件"huadongmen"可能包含以下文件： - CSS文件（如：style.css）：存储滑动门的样式定义...
很简单，很有用滑动门收集和选项卡和tab ，把多个滑动门，结合到一起，解决不同滑动门在同一页面的问题
- 如果有多个滑动门单元格，需要根据当前激活的单元格调整其他单元格的位置，以达到滑动门开闭的视觉效果。 3. **优化与兼容性**： - 对于不支持CSS3动画的旧浏览器，可以使用JavaScript库如jQuery来模拟过渡效果...
一个简单的滑动门通常由两个部分组成：主容器和子元素。主容器是整个滑动门的外框，而子元素则是每个可滑动的部分，比如导航链接。在HTML中，这些子元素可以是`<a>`标签，代表各个导航选项。 ```html 选项1 选项...
HTML调用JS实现多项滑动门选项卡特效是一种常见的前端技术，用于创建交互式和动态的网页内容。这种效果常用于导航菜单、内容切换、图片展示等场景，为用户提供更直观的操作体验。以下是对这个技术的详细解释： 一、...
在实际项目中，你可能会遇到需要处理多个滑动门元素的情况。这时，可以使用类选择器或数据属性来简化代码，同时利用JavaScript的数组方法和事件委托来实现更高效的操作。 总结来说，CSS滑动门特效结合了CSS的样式...
总的来说，"仿淘宝超漂亮的滑动门HTML"项目涉及到HTML基础、CSS布局与背景定位、JavaScript交互以及响应式设计等多个方面，是Web前端开发中一个综合性的实践案例。通过学习和实现这样的项目，开发者可以提升自己在...
Tab滑动门是一种常见的用户界面元素，通常用于在有限的空间内展示多个页面或功能选项，用户可以通过滑动或点击来切换不同的Tab内容。 【描述】：这个资源包提供了100个精心挑选的Tab滑动门实例，每个实例都代表了一...
以下是对20个滑动门示例的详细解析： 1. **基础滑动门**：这是一种最简单的滑动门实现，通常用于选项卡切换。当用户点击一个选项时，与其相关的面板会滑出，其他内容则滑入隐藏。 2. **垂直滑动门**：与水平滑动...
在网页设计中，滑动门通常指的是一个可以左右滑动的部分，其中包含多个子项，用户可以通过点击按钮或直接拖动来切换显示的内容。 在这个"标准滑动门实例 源码"中，我们可以学习到如何创建一个符合行业标准的滑动门...
1. 创建HTML结构：首先，我们需要创建一个包含多个导航项的HTML列表，每个列表项都将应用滑动门样式。 ```html <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li...
通过研究这三个滑动门实例，开发者不仅能提升CSS技能，还能学习到如何利用CSS实现动态效果，增强网页的互动性和视觉吸引力。同时，理解并掌握滑动门技术对于提升用户体验和网页设计水平具有重要意义。
在滑动门导航栏中，通常会为每个链接定义两个背景图像，分别位于左右两侧。当鼠标悬停时，改变背景图像的位置，模拟门滑动的视觉效果。 4. **浮动布局**：为了在一行内排列导航链接，通常会使用`float`属性。这有助...
滑动门技术是一种常见的网页设计手法，主要用于创建动态的、响应用户交互的界面元素。...在网页设计中，滑动门通常用于制作导航...通过理解和掌握滑动门的设计原理与实现方法，开发者可以创建出更多富有创意的网页元素。