ajaxtabs.js文件
// A 标签 href 属性将保持原有HTML功能。增加urn属性为AJAX Load 路径。 var Browser = new Object();Browser.isMozilla = ( typeof document.implementation != ' undefined ' ) && ( typeof document.implementation.createDocument != ' undefined ' ) && ( typeof HTMLDocument != ' undefined ' );Browser.isIE = window.ActiveXObject ? true : false ;Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf( " firefox " ) !=- 1 );Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf( " opera " ) !=- 1 ); if (Browser.isFirefox) ... ... { // entend Event Mod for FireFox extendEventObject();} function extendEventObject() ... ... { Event.prototype.__defineGetter__("srcElement", function () ......{ var node = this.target; while (node.nodeType != 1) node = node.parentNode; return node; }); Event.prototype.__defineGetter__("fromElement", function () ......{ var node; if (this.type == "mouseover") node = this.relatedTarget; else if (this.type == "mouseout") node = this.target; if (!node) return; while (node.nodeType != 1) node = node.parentNode; return node; }); Event.prototype.__defineGetter__("toElement", function () ......{ var node; if (this.type == "mouseout") node = this.relatedTarget; else if (this.type == "mouseover") node = this.target; if (!node) return; while (node.nodeType != 1) node = node.parentNode; return node; });} function IsChild(cNode,pNode)... ... { while(cNode!=null)......{ cNode=cNode.parentNode; if(cNode==pNode) return true; } return false;} var ajccache = new Object(); var waitInterval; var tempref; var MouseDelayTime = 150 ; // 鼠标感应延迟300毫秒 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;} function startajaxtabs()... ... { for(var i=0;i<arguments.length;i++) ......{ var ulobj=document.getElementById(arguments[i]); ulist=ulobj.getElementsByTagName("li"); for(var j=0;j<ulist.length;j++) ......{ var thelist=ulist[j]; if(thelist.parentNode.parentNode!=ulobj) continue;//只有第一层li有效 fixed 2006.9.29 var ulistlink=thelist.getElementsByTagName("a")[0]; var ulistlinkurl=ulistlink.getAttribute("urn"); var ulistlinktarget=ulistlink.getAttribute("rel"); 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"); } } thelist.LoadTab=function()......{ this.setActive(true); this.parentNode.parentNode.activetab.setActive(false); this.parentNode.parentNode.activetab=this; var ulistlink=this.getElementsByTagName("a")[0]; loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel")); } thelist.onmouseover=function(aEvent)......{ var myEvent = window.event ? window.event : aEvent; var fm=myEvent.fromElement; if(IsChild(fm,this) || fm==this) return;//过滤子元素event if(this.status=="active") return; tempref=this; clearTimeout(waitInterval); waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime); } thelist.onmouseout=function(aEvent)......{ var myEvent = window.event ? window.event : aEvent; var em=myEvent.toElement; if(IsChild(em,this) || em==this) return; //过滤子元素event if(this.status=="active") return; clearTimeout(waitInterval); } if(ulistlinkurl.indexOf("#default")!=-1)......{ thelist.setActive(true); ulobj.activetab=thelist; ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML; }else......{ thelist.setActive(false); } } if(ulobj.activetab==null) ulobj.activetab=ulist[0]; }} function getXmlhttp()... ... { var http_request; if(window.XMLHttpRequest) ......{ http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) ......{ http_request.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) ......{ try ......{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) ......{ try ......{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) ......{} } } if (!http_request) ......{ window.alert("can't create XMLHttpRequest object."); return null; } return http_request;} function loadAJAXTab(url,contentid)... ... { var ocontent=getElement(contentid); if(ajccache[url]==null) ......{ var xhttp=getXmlhttp(); xhttp.onreadystatechange=function()......{ if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)) ......{ ocontent.innerHTML=xhttp.responseText; ajccache[url]=ocontent.innerHTML; } } xhttp.open("GET",url,true); xhttp.send(null); }else......{ ocontent.innerHTML=ajccache[url]; }} window.onerror = function ()... ... {return true}xxx.aspx文件
a.在head中：
< SCRIPT src ="ajaxtabs.js" type ="text/javascript" ></ SCRIPT > b.滚动图片 < div id ="demo" style ="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff" > < table cellPadding ="0" align ="left" border ="0" cellspace ="0" > < tr > < td id ="" vAlign ="middle" > < div id ="demo1" valign ="center" >< asp:datalist id ="DataList4" RepeatDirection ="Horizontal" runat ="server" width ="100%" > < ItemTemplate > < DIV class =menuA id ='<%# DataBinder.Eval(Container.DataItem,"id","{0}")% > '> < UL > < LI type ="none" > < a href ='projectdetail.aspx?id=<%# DataBinder.Eval(Container.DataItem,"id","{0}")% > ' urn='product_gc.aspx?id= <% ... ...# DataBinder.Eval(Container.DataItem,"id","{0}") %> ' rel=onearea target="_blank"> < img src ='<%# DataBinder.Eval(Container.DataItem,"piclink","{0}")% > ' width="120" height="80" border=0> </ a > </ LI > </ UL > < SCRIPT type ="text/javascript" > ... ...startajaxtabs('<%# DataBinder.Eval(Container.DataItem,"id","{0}")%>') </ SCRIPT > </ ItemTemplate > </ asp:datalist ></ div > < DIV ></ DIV > </ td > < td vAlign ="top" > < div id ="demo2" >< asp:datalist id ="DataList5" RepeatDirection ="Horizontal" runat ="server" width ="100%" > < ItemTemplate > < DIV class =menuA id ='<%# DataBinder.Eval(Container.DataItem,"title","{0}")% > '> < UL > < LI type ="none" > < a href ='projectdetail.aspx?id=<%# DataBinder.Eval(Container.DataItem,"id","{0}")% > ' urn='product_gc.aspx?id= <% ... ...# DataBinder.Eval(Container.DataItem,"id","{0}") %> ' rel=onearea target="_blank"> < img src ='<%# DataBinder.Eval(Container.DataItem,"piclink","{0}")% > ' width="120" height="80" border=0> </ a > </ LI > </ UL > < SCRIPT type ="text/javascript" > ... ...startajaxtabs('<%# DataBinder.Eval(Container.DataItem,"title","{0}")%>') </ SCRIPT > </ ItemTemplate > </ asp:datalist ></ div > </ td > </ tr > </ table > </ div > < script > ... ... var speed=30 //demo2.innerHTML=demo1.innerHTML function Marquee()......{ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else......{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() ......{clearInterval(MyMar)} demo.onmouseout=function() ......{MyMar=setInterval(Marquee,speed)} </ script > c.鼠标经过时内容变换区的层位置 < DIV id = " onearea " > < table width = " 275 " border = " 0 " align = " center " cellPadding = " 5 " cellSpacing = " 0 " > < tr > < td id = " TDtitle " align = " center " height = " 27 " runat = " server " >& nbsp; </ td > </ tr > < tr > < td id = " TDdetail " vAlign = " top " align = " left " height = " 80 " runat = " server " >& nbsp; </ td > </ tr > < tr > < td align = " right " height = " 20 " >< asp:hyperlink id = " HyperLink1 " runat = " server " Target = " _blank " > 更多 >></ asp:hyperlink >& nbsp; </ td > </ tr > </ table > </ DIV > d.produc_gc.aspx文件是放置变化的内容