首先我们知道js滑动门的三种实现思路：
-自定义方法
-闭包
-自定义属性
那么写个列子分析一下各自的好坏。demo地址：http://codepen.io/tianzi77/pen/jPMPeB
html结构：
<div id="content">
<div id="tabs">
<ul>
<li class="active">天子</li>
<li>滑动门</li>
<li>javascript</li>
</ul>
<span id="state">-</span>
</div>
<div id="list">
<ul class="active">
<li>IE6 PNG 解决方案合集</li>
<li>firefox下输入框innerHtml问题</li>
<li>精品菜单导航，多年精心收集整理上上品菜单</li>
<li>60个WEB实用效果集合</li>
<li>CSS3动态按钮导航集锦</li>
<li>HTML 5的革新：结构之美</li>
<li>JavaScript高级程序设计（第2版）</li>
<li>w3cfuns-我爱你！~~~</li>
<li>高性能网站建设指南</li>
<li>罕见的皮具拉链效果博客PSD</li>
<li>【基础五】块状元素和内联元素</li>
<li>“阳癫疯”的纯css下拉导航原理</li>
<li>请问这个排序功能如何实现？</li>
<li>分享10个便利的HTML5/CSS3框架</li>
<li>白璐ersonal 申请【热血活动】版块版主</li>
<li>web前端标准在各浏览器中的差异</li>
</ul>
<ul>
<li>腾讯面试题</li>
<li>近期面试感受</li>
<li>腾讯实习生web前端JS开发工程师面试经历</li>
<li>阿里巴巴web前端开发面试题</li>
<li>网易页面重构面试题</li>
<li>网易web前端开发师面试问答的经历</li>
<li>2011腾讯前端面试稿</li>
<li>Alibaba web前端开发工程师面试奇遇记</li>
<li>腾讯实习生网页重构组招聘公开试题（含答案</li>
<li>求职记——记录成为面霸的全过程</li>
<li>淘宝Web前端开发面试经历</li>
<li>百度前端面试题对话记录（内推面试）</li>
<li>2015年最新百度前端开发面试经历(一面和二面</li>
<li>去TX的事基本黄了，题我发出来了</li>
<li>俺们公司的面试题</li>
</ul>
<ul>
<li>滑动门滑动门滑动门</li>
<li>滑动门滑动门滑动门</li>
<li>滑动门滑动门滑动门</li>
<li>滑动门滑动门滑动门</li>
<li>滑动门滑动门滑动门</li>
<li>滑动门滑动门滑动门</li>
<li>滑动门滑动门滑动门！</li>
</ul>
</div>
</div>然后写css样式：
*{
margin:0;
padding:0;
}
body{
font-size:12px;
}
#content{
margin:0 auto;
width:600px;
border:1px #000 solid;
}
#tabs{
height:30px;
background:#000;
overflow:hidden;
position:relative;
}
#tabs #state{
display:block;
top:0;
right:0;
width:30px;
height:30px;
font-size:24px;
font-weight:700;
text-align:center;
color:#fff;
cursor:pointer;
position:absolute;
}
#tabs li{
display:inline;
padding:0 8px;
line-height:30px;
color:#fff;
list-style:none;
cursor:pointer;
float:left;
}
#tabs .active{
color:#000;
background:#fff;
}
#list{
padding:10px 0;
}
#list ul{
margin:0 25px;
display:none;
}
#list ul li{
height:25px;
line-height:25px;
}
#list .active{
display:block;
}
js部分：
首先加减号伸缩按钮比较简单：
state.onclick = function()
{
var text = this.innerHTML;
if(text == "-")
{
this.innerHTML = "+";
list.style.display = "none";
}
else
{
this.innerHTML = "-";
list.style.display = "block";
}
}然后就是获取id或者class，由于不用jquery，所以直接定义一个$方法获取。简化代码量。
var $ = function(ids)
{
return document.getElementById(ids);
}
var tabs = $("tabs").getElementsByTagName("li");
var state = $("state");
var list = $("list");
var ul = list.getElementsByTagName("ul");ul的切换和li的滑动效果有三种方法，一一道来：
//方法一可以不使用闭包 思路比较简单 自定义属性 代码少，经常使用。
for(var i = 0; i < tabs.length; i++)
{
tabs[i].index = i;
tabs[i].onmouseover = function()
{
for(var i = 0; i < tabs.length; i++)
{
tabs[i].className = ul[i].className = "";
}
this.className = ul[this.index].className = "active";
`
}方法二：
function events(index)
{
tabs[index].onmouseover = function()
{
for(var i = 0; i < tabs.length; i++)
{
tabs[i].className = ul[i].className = "";
}
this.className = ul[index].className = "active";
}
}//方法三 采用闭包立即执行索引
(
function(index)
{
tabs[index].onmouseover = function()
{
for(var i = 0; i < tabs.length; i++)
{
tabs[i].className = ul[i].className = "";
}
this.className = ul[index].className = "active";
}
}
)(i);随便掌握一种便可玩转滑动门。
时间： 2024-12-26 08:21:46