Ajax标签导航效果(仿网易首页)

每件事情都必须有一个期限,否则,大多数人都会有多少时间就花掉多少时间。积极的人在每一次忧患中都看到一个机会,而消极的人则在每个机会都看到某种忧患。
根据yaohaixiao的Ajax标签导航效果:http://www.blueidea.com/tech/web/2006/4144.asp改进。
效果:
http://www.lorlo.com/tab.html主要是改了JS:

<!--
functiongetObject(objectId){
if(document.getElementById&&document.getElementById(objectId)){
//W3CDOM
returndocument.getElementById(objectId);
}
elseif(document.all&&document.all(objectId)){
//MSIE4DOM
returndocument.all(objectId);
}
elseif(document.layers&&document.layers[objectId]){
//NN4DOM..note:thiswon'tfindnestedlayers
returndocument.layers[objectId];
}
else{
returnfalse;
}
} varresponsecont;
varxmlHttp;
varrequestType;
varnewsstring;
varajccache=newObject();//缓存已访问的数据页面
varurl;
varMouseDelayTime=150;//鼠标感应延迟
varwaitInterval; functionCreateXMLHttpRequest(){
//InitializeMozillaXMLHttpRequestobject
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}
//InitializeforIE/WindowsActiveXversion
elseif(window.ActiveXObject){
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP.3.0");
}
catch(e){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e){newsstring="<divclass='loading'>Loadingrquestcontentfail,Pleasetryitagainlatter...</div>";}
}
}
} functiongetnews(tagid,x){
url="tab/"+tagid+'_'+x+'.html';
//varloadstatustext="<divclass='loading'><imgsrc='images/loading.gif'/>Loadingrequestcontent,pleasewait...</div>";
requestType=tagid;
if(ajccache[url]==null){
CreateXMLHttpRequest(); //getObject(requestType+'_cnt').innerHTML=loadstatustext;
xmlHttp.onreadystatechange=processRequestChange;
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.send(null);
}
else
{shownews(requestType,ajccache[url]);}
} functionprocessRequestChange(){
//onlyifxmlHttpshows"complete"
if(xmlHttp.readyState==4){
//onlyhttp200toprocess
if(window.location.href.indexOf("http")==-1||xmlHttp.status==200){
newsstring=xmlHttp.responseText;
//injectcententtotab-pane
shownews(requestType,newsstring);
ajccache[url]=newsstring;//把已访问的数据缓存下来
}
}
} functionshownews(requestType,newsstring){
//<![CDATA[
responsecont=getObject(requestType+'_cnt');
responsecont.innerHTML=newsstring;
//]]>
} functionTabNews(tagid,x){
for(vari=1;i<=7;i+=2){
if(i==x){
getObject(tagid+i).className="tabactive"+i;
if(i!=1){
getObject(tagid+(i-1)).style.display="none";
if(i!=7){
getObject(tagid+(i+1)).style.display="none";
}
}
if(i==1){
getObject(tagid+"2").style.display="none";
}
try{
getnews(tagid,i);
}
catch(e){
alert(e);
}
}
else
{
getObject(tagid+i).className="";
if(i!=7){
getObject(tagid+(i+1)).style.display="block";
}
}
}
} varidn; functionaet(objid,tagid,etp){//为LI加上事件objid:容器IDtagid:组别etp:触发类型0-onmouseover1-onclick
variif=0;
varlis=objid.getElementsByTagName('li');
requestType=tagid;
url="tab/"+requestType+"_1.html";
ajccache[url]=getObject(requestType+'_cnt').innerHTML;
for(variy=0;iy<lis.length;iy++){
if(iif==0){
iif=1;
with(lis[iy]){
if(etp==0){
lis[iy].onmouseover=function(){
if(this.status=="active")return;
requestType=attributes.getNamedItem('id').value.substring(0,attributes.getNamedItem('id').value.length-1);
idn=parseInt(attributes.getNamedItem('id').value.substring(attributes.getNamedItem('id').value.length-1,attributes.getNamedItem('id').value.length));
clearTimeout(waitInterval);
waitInterval=window.setTimeout("TabNews(requestType,idn);",MouseDelayTime);
}
lis[iy].onmouseout=function(){if(this.status=="active")return;clearTimeout(waitInterval);}
}
if(etp==1){
lis[iy].onmouseover=function(){}
lis[iy].onclick=function(){
if(this.status=="active")return;
requestType=attributes.getNamedItem('id').value.substring(0,attributes.getNamedItem('id').value.length-1);
idn=parseInt(attributes.getNamedItem('id').value.substring(attributes.getNamedItem('id').value.length-1,attributes.getNamedItem('id').value.length));
varloadstatustext="<divclass='loading'><imgsrc='images/loading.gif'/>Loadingrequestcontent,pleasewait...</div>";
getObject(requestType+'_cnt').innerHTML=loadstatustext;
TabNews(requestType,idn);
}}}}
else{iif=0;}
}
}
functionata(objid){//一个无关的函数,为解决一个链接问题
varas=objid.getElementsByTagName('a');
for(vari=0;i<as.length;i++){
as[i].pathname="/showfile.html";
} }
//-->

到此这篇关于Ajax标签导航效果(仿网易首页)就介绍到这了。积金遗于子孙,子孙未必能守;积书于子孙,子孙未必能读。不如积阴德于冥冥之中,此乃万世传家之宝训也。更多相关Ajax标签导航效果(仿网易首页)内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

标签: Ajax