javascript滑动门的实现方法和案例

来源：互联网发布：ov7670摄像头数据手册编辑：程序博客网时间：2024/06/03 14:08

首先我们知道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);

随便掌握一种便可玩转滑动门。

0 0