[在线等]求js滑动门(标签)代码

Question

mootools这个js框架有这个效果，也很好用。

Answer 1

网易使用的仅仅是ajax的异步读取而已,你只要使用xmlhttprequest的异步就可以达到目的.所谓的延迟只是异步加载完成前的下载时间而已. 当发起新的xmlhttprequest时将前个request abort()就可以终止加载.

Answer 2

http://blog.csdn.net/muxrwc/archive/2007/08/06/1728769.aspx这个有延迟功能...
Ajax部分，请自行添加...

Answer 3

function getElement(aID)
{
  return (document.getElementById) ? document.getElementById(aID): document.all[aID];
}
//初始化 ajax tabs
var ajccache=new Object();
var waitInterval;
var tempref;
var MouseDelayTime=150;
//以下不解释了
function getTBprefixName(str,sta){
if(str.indexOf("active")!=-1 || str.indexOf("normal")!=-1) str=str.substr(6);
else if(str.indexOf("over")!=-1) str=str.substr(4);
else str="";
return sta+str;
}
//调用这个方法
startajaxtabs("maintab","tabone","tabtwo","tabzero","tabthree","tabfour","adMenu","mostnews");
function startajaxtabs(){
//遍历参数(for循环可以优化)
for(var i=0;i<arguments.length;i++)
{
var ulobj=document.getElementById(arguments[i]);//获取id为参数的元素;
ulist=ulobj.getElementsByTagName("li"); //获取当前元素的所有标签是li的子元素
for(var j=0;j<ulist.length;j++)//遍历所有li的子元素 (for循环可以优化)
{
var thelist=ulist[j];//当前遍历到的li元素为thelist;
if(thelist.parentNode.parentNode!=ulobj)continue;//如果当前的li元素的父元素不是id指定的元素时重新循环.(就是说是第一层li标签时继续)
var ulistlink=thelist.getElementsByTagName("a")[0];//获取li元素的子集合中的第一个a标签元素
var ulistlinkurl=ulistlink.getAttribute("urn");//获取 ulistlink的urn属性
var ulistlinktarget=ulistlink.getAttribute("rel");//获取 ulistlink的rel属性
//给当前li元素添加方法 setActive (设置当前激活状态 参数true为激活 参数false为不激活)
thelist.setActive=function(bactive){
if(bactive){
this.status="active";//更改状态
this.className=getTBprefixName(this.className,"active");//更改样式
}else{
this.status="normal";
this.className=getTBprefixName(this.className,"normal");
}
}
//给当前li元素添加方法 LoadTab (估计是加载tab的触发方法)
thelist.LoadTab=function(){
this.setActive(true);//将当前tab激活
this.parentNode.parentNode.activetab.setActive(false);//取消激活当前正在激活的tab (this.parentNode.parentNode可以自己用ulobj来代替)
this.parentNode.parentNode.activetab=this; //设置正在激活的tab为当前tab
var ulistlink=this.getElementsByTagName("a")[0];//获取当前元素子集中的第一个a标签元素
loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel"));//使用a标签的urn和rel属性做为参数调用loadAJAXTab方法
}
thelist.onmouseover=function(aEvent){
var myEvent = window.event ? window.event : aEvent;
var fm=myEvent.fromElement;//是当前触发鼠标事件的元素
if(IsChild(fm,this) || fm==this) return;//这个触发的元素是否包含在当前li元素内或者就是li元素 如果不包含则返回
if(this.status=="active") return;//如果当前li元素的状态是激活 则返回.
tempref=this;//将全局变量 tempref设置为当前li元素
clearTimeout(waitInterval);//清除正在轮候的 Timeout等待
waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime);//发起新的Timeout等待
} thelist.onmouseout=function(aEvent){
var myEvent = window.event ? window.event : aEvent;
var em=myEvent.toElement;
if(IsChild(em,this) || em==this) return;
if(this.status=="active") return;
clearTimeout(waitInterval);
}
//以下是初始化时第一个被激活的tab
if(ulistlinkurl.indexOf("#default")!=-1){
thelist.setActive(true);
ulobj.activetab=thelist;
ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML;//这个是用户将通过ajax获取到的innerHTML缓冲起来 以后再次获取时就直接取缓冲中的内容
}else{
thelist.setActive(false);
} }
if(ulobj.activetab==null) ulobj.activetab=ulist[0];
}
}
//以下是异步加载的过程 url和contentid是上面传递过了的参数
function loadAJAXTab(url,contentid){
var ocontent=getElement(contentid);//getElement方法其实就是document.getElementById
//判断是否存在缓存
if(ajccache[url]==null) {
//缓存不存在
var xhttp=getXmlhttp();//创建xmlhttp
//异步获取事件
xhttp.onreadystatechange=function(){
if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1))
{
ocontent.innerHTML=xhttp.responseText;//直接将获取到的文本写入到目标的innerHTML里面
ajccache[url]=ocontent.innerHTML;//将内容写入缓存 是我就连串写ajccache[url]=ocontent.innerHTML=xhttp.responseText;
}
}
xhttp.open("GET",url,true);//创建异步连接
xhttp.send(null);//发送异步请求
}else{
//如果存在缓存直接写入
ocontent.innerHTML=ajccache[url];
}
}/*
总结163的tab控制代码写得其实很一般 其实激活状态和非激活状态不用重写innerHTML 大可改变样式的display属性隐藏起来
代码还算是简单明了.不能算很专业的水平但也不错了. 
*/

Answer 4

var   a=null 
function   sets(cls,   id,   url){ 
        a=setTimeout("tabs('"+cls+"','"+id+"','"+url+"')",300) 
} function   tabs(cls,   id,   url) 
{ 
var   m   =   document.getElementById("tabs_"+id).getElementsByTagName("li"); 
for(var   n   =   0;   n   <   m.length;   n++) 
{ 
m[n].className   =   ""; 
} 
m[cls].className   =   "active"; 
if(url.substr(0,   1)   ==   "#") 
{ 
var   id_url   =   url.substr(1,   url.length); 
document.getElementById("tabs_"+id+"_cont").innerHTML   =   document.getElementById(id_url).innerHTML; 
} 
else 
{ 
document.getElementById("tabs_"+id+"_cont").innerHTML   =   joinHTML(url); 
} 
} function   joinHTML(url) 
{ 
var   temp="" 
        try 
        { 
                var   strxmlhttp; 
                try 
                        { 
                                strxmlhttp   =   new   ActiveXObject("Msxml2.XMLHTTP.3.0"); 
                        } 
                        catch(e) 
                        { 
                                strxmlhttp   =   new   XMLHttpRequest(); 
                        } 
        strxmlhttp.open("GET",   url,   false); 
        strxmlhttp.send(null); 
        temp=strxmlhttp.responseText; 
        //alert(strxmlhttp.responseText); 
        } 
        catch(e) 
        { 
                temp=e; 
        } 
        return   temp 
}