集延时滑动和无侵人式JS于一体的滑动门
现在做滑动门一般都是无侵入式的，延时滑动可以防止鼠标滑动过快而导致CPU占用过高，从网易学来的,不多说了，上代码
<!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" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ padding:0; margin:0;}
.sub{ clear:both; width:400px; border: 1px solid #000000; background:#ccc; margin:10px auto;}
.sub .navbox{ height:28px; overflow:hidden; border-bottom:1px solid #0000FF;}
.sub li{ float:left; padding:0px 20px; list-style:none; cursor:pointer; height:28px; line-height:28px;}
.sub .content{ background:#FF0000; color:#FFFFFF;}
.sub .contbox{ clear:both; padding:10px;}
-->
</style>
</head>
<body>
<div id="sub1" class="sub">
<div class="navbox">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div class="contbox">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
<div id="sub2" class="sub">
<div class="navbox">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div class="contbox">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
<script type="text/javascript">
nav_cont('sub1','cont_tab','tab',3);
nav_cont('sub2','cont_tabs','tabs',3);
function $(id){return document.getElementById(id)}
function nav_cont(subbox,con_list,list,n)
{
var navs = $(subbox).getElementsByTagName('li');
var conts = $(subbox).getElementsByTagName('p');
n = conts.length;
for(var i=0; i<n; i++)
{
conts[i].id = con_list+i;
conts[i].setAttribute("id",con_list+i);
conts[i].style.display = "none";
navs[i].id = list+i;
navs[i].setAttribute("id",list+i);
navs[i].onmouseover = function(e)
{
var e = this;
e.t = setTimeout(function()
{
for(var i=0; i<n; i++)
{
$(con_list+i).style.display = "none";
$(list+i).className = "";
}
$("cont_"+e.id).style.display = "block";
$(e.id).className = "content";
},500)
e.onmouseout=function(){clearTimeout(this.t)}
}
}
conts[0].style.display = "block";
navs[0].className = "content";
}
</script>
</body>
</html>
上面是这个JS的运行效果，代码非常简单，html和css代码就不说了，JS代码说说要注意的地方和如何使用
function $(id){return document.getElementById(id)}
这个是获取ID的函数
function nav_cont(subbox,con_list,list,n)
这个是主函数，里面的4个参数分别表示整个滑动的ID，内容ID，滑动列表ID，列表数量
var navs = $(subbox).getElementsByTagName('li');
var conts = $(subbox).getElementsByTagName('p');
navs和conts分别为获取这个滑动门下的所有li和p，这个地方我给他写死了，如果觉得不方便的话也可以直接写成参数.
conts[i].id = con_list+i;
conts[i].setAttribute("id",con_list+i);
conts[i].style.display = "none";
navs[i].id = list+i;
navs[i].setAttribute("id",list+i);
这些就是给列表和内容赋上相应的ID和初始化
以上都是做些前期准备工作
navs[i].onmouseover = function(e)
{
var e = this;当滑动的时候，首先，把参数当前状态赋给参数e
e.t = setTimeout(function()，然后设置一个定时器
{
for(var i=0; i<n; i++)
{
$(con_list+i).style.display = "none";
$(list+i).className = "";
}
$("cont_"+e.id).style.display = "block";这里我把cont_写死了，调用的时候就必须得用到，"+e.id"的意思是内容的ID是"cont_"和当前列表ID的组合
$(e.id).className = "content";当前列表ID的样式名
},500)间隔时间为500毫秒
e.onmouseout=function(){clearTimeout(this.t)}这个onmouseout状态是防止当滑动过快的时候，出现跳跃性滑动
}
conts[0].style.display = "block";
navs[0].className = "content";
这个是默认第一个状态，内容的为显示，列表的样式名为"content"
使用方法就是:
nav_cont('sub1','cont_tab','tab',3);
nav_cont('sub2','cont_tabs','tabs',3);
sub1和sub2可以随便取名，只要赋给页面里相应的ID就行
cont_tab和cont_tabs也可以随便取名，只要赋给页面里相应的ID就行
而tab和tabs则不行，必须遵循cont_tab和cont_tabs，也就是说除了cont_，后面的名字必须是一样的，当然，不用cont_也行，把这个也改成参数，名字就可以自己定了
3就是滑动数量了
