JavaScript与CSS实现嵌套滑动门效果：代码详解

需积分: 34 57 浏览量更新于2024-09-10 1 收藏 2KB TXT 举报

本文档介绍了一个使用JavaScript和CSS联合实现的双层嵌套滑动门效果。在这个示例中，开发者创建了一个包含三个可滑动元素（li）的列表，每个元素代表一个滑动块，它们以两层结构排列，内部的滑动块嵌套在外部滑动块之中。CSS主要负责布局和样式，如设置`ul`的样式，使用`float`属性让`li`元素并排显示，通过`margin`调整元素间的间距，`position`属性确保下边框的正确显示。关键的滑动效果由JavaScript控制，通过`showdiv()`函数实现，该函数遍历所有滑动块，并切换它们的`display`属性，从而实现滑动门的隐藏和显示。具体实现步骤如下： 1. HTML部分：定义了`<html>`、`<head>`、`<body>`结构，并在`<head>`中设置了页面的基本样式，包括字体大小、页面宽度、居中对齐等。`<ul>`用于存储滑动块，每个`<li>`元素设置了背景图片、文字样式、高度和宽度，并使用`float`使其并排。`.dise`和`.undise`类分别对应显示和隐藏状态。 2. CSS样式：定义了全局样式，如字体大小，以及特定元素的样式，如`#tab`的容器样式、`li`元素的样式（背景、颜色、边距等）、`.fff`和`.all`的样式，以及`.alldiv`的全屏内容区域样式，包括边框。 3. JavaScript部分：`showdiv(i)`函数的核心逻辑，它接受一个参数`i`，表示要操作的滑动块索引。通过`getElementById`方法获取对应的滑动块元素，然后使用`for`循环遍历1到3，根据索引控制内部滑动块的显示与隐藏。当`i`等于1时，显示第一个滑动块，其他滑动块隐藏；随着`i`递增，依次切换显示下一个滑动块。这个项目虽然实际应用可能不多，但展示了如何利用基础的CSS布局和JavaScript交互，创建出具有一定动态效果的网页组件。开发者可以借此练习DOM操作和响应式设计，提高CSS选择器的熟练度。同时，这也是理解CSS动画和JavaScript事件处理的好例子。

<!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" mrc="text/html; charset=gb2312" />
<title>双层嵌套的滑动门导航块</title>
<style>
*{
font-size:9pt;
}
#tab{width:400px;
height:auto;
margin:0 auto;
position:relative;
}
ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(http://p1.mb5u.com/texiao/1/tr2.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}
.dise{display:block;}
.undise{display:none;}
.fff{background:
url(http://p1.mb5u.com/texiao/1/tr.jpg);}
.all{clear:left; width:400px;}
.all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要设border*/
#kao{position:absolute;
top:40px;
}

</style>
</head>
<script language="javascript">

下载后可阅读完整内容，剩余2页未读，立即下载

yzmeiyoumingzi

粉丝: 0
资源: 2

JavaScript与CSS实现嵌套滑动门效果：代码详解

JS无缝滚动 双层图片+文字解决滚动一次问题

Android嵌套滑动

WEB页面中嵌套的滚动窗口实例页面

JS+CSS实现简单滑动门(滑动菜单)效果

JQ+CSS图片滑动门

JavaScript网页特效\Ajax+CSS滑动门特效（点击式）

全新前端参考手册合集(JQuery1.11+CSS3.0+HTML5+javascript+DHTML+w3cshool菜鸟教程)

JS+CSS实现简易实用的滑动门菜单效果

JS+CSS实现仿雅虎另类滑动门切换效果

css+js滑动门小实用小实例

最新资源

JS无缝滚动双层图片+文字解决滚动一次问题