原生js实现的滑动门代码详解:
所谓滑动门其实就是tab选显卡效果,就是触发方式不同而已,同样是非常常用的效果之一,大家都有这样的感觉,与其生搬硬套,不如知道实现的原理与过程,这样的话,使用会更加额灵活,当然也不容易犯错,并且改造起来更加得心应手,本章节就分享一下一段这样的代码,并且对它的实现过程进行详细的分析,希望能够给需要的朋友打来帮助。
代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">body{font-family: "微软雅黑", "SimSun", "宋体", "Arial Narrow";}#header, #main, #footer { width:1050px; background:#F1F9D9; margin:5px auto;}#header{height:50px;}#main{height:auto;}#footer{height:50px;}#menu { height:36px; padding:2px 0 0 0;}li { list-style:none; cursor:pointer;}.category { margin:0; height:35px; border-bottom:1px solid #b5e2f3; text-align:center;}.label { border:1px solid #b5e2f3; float:left; width:100px; height:25px; margin:0 3px; background:#F1FEF3; padding:9px 0 0 0; outline:0; -moz-border-radius:5px 5px 0 0;}.label-selected { background:#FFF; border-bottom:1px solid #FFF;}#linksContent { margin-top:-1; height:600px; padding:10px; border:1px solid #b5e2f3; border-top:0; background:#FFF;}.link { float:left; width:180px; display:block; margin:10px 0;}</style><script type="text/javascript">var $=function(a,b){ var id=document.getElementById(a); var obj=(b)?id.getElementsByTagName(b):id; return obj}var n=0;var tab=function(menu,body){ var l=menu.length; for(var i=0;i<l;i++) { menu[i].onmouseover=function(a){ return function(){ menu[n].className="label" body[n].style.display = "none"; menu[a].className="label label-selected"; body[a].style.display = "block"; n=a; } }(i);}}window.onload=function(){ tab($("menu","li"),$("linksContent","div"));}</script></head><body><div id="container"> <div id="header"></div> <div id="main"> <div id="menu"> <ul class="category"> <li class="label label-selected">蚂蚁部落</li> <li class="label">人生奋斗</li> <li class="label">编程社区</li> <li class="label">程序人生</li> <li class="label">代码奴隶</li> <li class="label">人生目标</li> </ul> </div> <div id="linksContent"> <div class="category-1" style="display:block;"> <ul> <li class="link"><span>js教程</span></li> <li class="link"><span>jquery教程</span></li> <li class="link"><span>div教程</span></li> <li class="link"><span>html5教程</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>努力奋斗</span></li> <li class="link"><span>美好未来</span></li> <li class="link"><span>每一天都是新的</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>蚂蚁部落</span></li> <li class="link"><span>js变成</span></li> <li class="link"><span>css3学习</span></li> <li class="link"><span>html5前景</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>java学习</span></li> <li class="link"><span>html学习</span></li> <li class="link"><span>编译原理</span></li> <li class="link"><span>人工智能</span></li> <li class="link"><span>算法设计</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>html学习</span></li> <li class="link"><span>编译原理</span></li> <li class="link"><span>人工智能</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>成就感</span></li> <li class="link"><span>掌握自己</span></li> <li class="link"><span>帮助别人</span></li> </ul> </div> </div> </div> <div id="footer"></div></div></body></html>
以上代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
1.var $=function(a,b){},此函数用作返回指定id属性值对象下指定标签对象集合,第一个参数是父级元素的id属性值,第二个是要获取指定的标签元素对象集合的标签标签名称。
2.var id=document.getElementById(a),获取指定id属性值的对象。
3.var obj=(b)?id.getElementsByTagName(b):id,如果b参数存在,则返回对象标签的对象集合,否则返回id对象。
4.return obj,返回获取的对象。
5.var n=0,声明一个变量,并初始化值为0,此变量存储的是要设置为隐藏的对应元素的索引值。
6.var tab=function(menu,contents){}),实现滑动门的核心函数,第一个参数是作为标题的li元素集合,第二个是作为内容的div集合。
7.var l=menu.length,获取作为标题的li的数量。
8.for(var i=0;i<l;i++){},为每一个标题注册事件处理函数。
9.menu.onmouseover=function(a){}(i),这个是用作注册事件处理函数,大家不要被它的外表迷惑,注册事件处理函数是function(a){}(i)此函数返回的函数,参数a是传递的li的索引值。
10.return function(){},这个是被真正注册的事件处理函数。
11.menu[n].className="label",将索引为n的li的的class属性值设置为label。
12.contents[n].style.display="none",将索引值为n的div的class属性值设置为隐藏。
13.menu[a].className="label label-selected",将索引值为a的li元素的class属性值设置为label label-selected,也就是当前状态。
14.contents[a].style.display="block",将索引值为a的divclass属性值设置为显示状态。
15.n=a,将a的值赋值给n,也就是当前显示的状态的元素的索引,就是下一个将要设置为隐藏状态的元素的索引。
二.相关阅读:
1.getElementById()函数可以参阅document.getElementById()用法详解一章节。
2.getElementsByTagName()函数可以参阅javascript的document.getElementsByTagName()一章节。
3.onmouseover事件可以参阅javascript的onmouseover事件一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10901
更多内容可以参阅:http://www.softwhy.com/javascript/
原标题:原生js实现的滑动门代码详解
关键词:JS