JS防Yahoo的选项卡导航特效
代码简介：
防Yahoo的选项卡导航特效，代码有些多，建议封装单独一个JS文件调用。
代码内容：
<!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" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /> <title>JS防Yahoo的选项卡导航特效_网页代码站(www.webdm.cn)</title> <style type="text/css"> body { margin:0; text-align:center;font-size:12px;} .papanel,#pabd,.paft,#patop{width:348px;} .papanel{background:#a5d0fd url(http://www.webdm.cn/images/20091231/pabg.gif) repeat-x;border-left:1px solid #7bbdff;border-right:1px solid #7bbdff;font-family:arial;} #pabd{padding-bottom:.35em;background:url(http://www.webdm.cn/images/20091231/patbg.gif) no-repeat top left;} #pabd,.paft{clear:both;overflow:hidden;} #patop{height:25px;line-height:20px;overflow:hidden;} /*顶部圆角开始*/ .pabdt{background:url(http://www.webdm.cn/images/20091231/pabdr.gif) 0 0 no-repeat;width:350px;height:4px;overflow:hidden;} .pabdb{background:url(http://www.webdm.cn/images/20091231/pabdr.gif) 0 -4px no-repeat;width:350px;height:3px;overflow:hidden;} .paft{height:4px;line-height:0;} /*顶部圆角结束*/ .patabs{width:340px;margin:0 auto;} .patabslst{margin:.25em 0 0 0;padding:0;list-style:none;height:40px;} .patabslst li{float:left;position:relative;width:112px;height:40px;line-height:40px;text-align:center;} .patabslst li a{display:block;width:109px;height:40px;} /*内置背景开始*/ .papreviewdiv{position:relative;clear:both;width:338px;_width /* */:340px;margin:0 auto;background:#fff; border-left:1px solid #85c3ff;border-right:1px solid #5ca3e9;display:none;} /*外部小图标开始*/ .icomailn{background:url(http://www.webdm.cn/images/20091231/tabicmln.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://www.webdm.cn/images/20091231/tabicmln.gif", sizingMethod='crop');} .icomail{background:url(http://www.webdm.cn/images/20091231/tabicml.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://www.webdm.cn/images/20091231/tabicml.gif", sizingMethod='crop');} .icoalb{background:url(http://www.webdm.cn/images/20091231/tabicalb.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://www.webdm.cn/images/20091231/tabicalb.gif", sizingMethod='crop');} .icomus{background:url(http://www.webdm.cn/images/20091231/tabicmus.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://www.webdm.cn/images/20091231/tabicmus.gif", sizingMethod='crop');} .icofin{background:url(http://www.webdm.cn/images/20091231/tabicfin.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://cn.yimg.com/i/hp/ny/ic/tabicfin.gif", sizingMethod='crop');} .icoalqq{background:url("http://www.webdm.cn/images/20091231/3.gif") 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://www.webdm.cn/images/20091231/3.gif", sizingMethod='crop');} /*内置图标开始*/ .pamailcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.webdm.cn/images/20091231/icmla.gif) 2em 2em no-repeat;padding:1.5em 0 0 10em;} .pamailcon strong,.pamywebcon strong{color:#ff0000;} .pasmscon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.webdm.cn/images/20091231/icmla.gif) 1em 1.5em no-repeat;padding:1.5em 0 0 8em;} .pasmscon strong,.pamywebcon strong{color:#ff0000;} .paemailcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.webdm.cn/images/20091231/icmla.gif) 1em 1.5em no-repeat;padding:1.5em 0 0 8em;} .paemailcon strong,.pamywebcon strong{color:#ff0000;} .paqqcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.webdm.cn/images/20091231/icmla.gif) 1em 1.5em no-repeat;padding:1.5em 0 0 8em;;} .paqqcon strong,.pamywebcon strong{color:#ff0000;} .pafaxcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.webdm.cn/images/20091231/icmla.gif) 1em 1.5em no-repeat;padding:1.5em 0 0 8em;;} .pafaxcon strong,.pamywebcon strong{color:#ff0000;} .patxcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.webdm.cn/images/20091231/icmla.gif) 1em 1.5em no-repeat;padding:1.5em 0 0 8em;;} .patxcon strong,.pamywebcon strong{color:#ff0000;} /*背景开始*/ .patabs2,.patabs1{background:url(http://www.webdm.cn/images/20091231/patabs1.gif) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://www.webdm.cn/images/20091231/patabs1.gif", sizingMethod='crop');} .patabs1_pamail,.patabs2_paweath{background:url(http://www.webdm.cn/images/20091231/patabsa.gif) no- repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20091231/patabsa.gif", sizingMethod='crop');} .patabs1_paalb,.patabs2_pafin{background:url(http://www.webdm.cn/images/20091231/patabsb.gif) no- repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20091231/patabsb.gif", sizingMethod='crop');} .patabs1_pamus,.patabs2_pamyw{background:url(http://www.webdm.cn/images/20091231/patabsc.gif) no- repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.webdm.cn/images/20091231/patabsc.gif", sizingMethod='crop');} #patabs1 strong,#patabs2 strong{color:#0062c5;font-size:13px;margin-left:2em;} #patabs1 a,#patabs2 a{text-decoration:none;} </style> <script type="text/javascript"> ycn=window.ycnui||{}; ycn.Common=new function(){this.lTrim=function(i){return i.replace(/^\s*/,"");};this.rTrim=function(i){return i.replace(/\s*$/,"");};this.trim=function(i){return this.rTrim (this.lTrim(i));};this.getEl=function(i){if(!document.getElementById)return false;if(typeof i==="string"){return document.getElementById(i);}else{return i;}};this.getElByClassName=function(t,n,s,el){var el=(el)?el:document;var itm=el.getElementsByTagName(t);var num=1;for(i=0;i<itm.length;i++){if(itm[i].className===n && s===num) {return itm[i];}else if(itm[i].className===n){num++;}} return false;}; this.isIE6=function(){return navigator.userAgent.search('MSIE')>0 && navigator.userAgent.search('6')>0;} this.isIE=function(){return navigator.userAgent.search('MSIE')>0;} this.isOpera=function(){return navigator.userAgent.indexOf('Opera')>-1;} this.isMoz=function(){return navigator.userAgent.indexOf('Mozilla/5.')>-1;} }; /*事件*/ ycn=window.ycn||{}; ycn.Event={ addEvent:function (obj,evType,fn){ if(obj.addEventListener) { obj.addEventListener(evType,fn,false); return true; }else if(obj.attachEvent){ var r=obj.attachEvent("on"+evType,fn); ycn.EventCache.add(obj,evType,fn); return r; }else{return false;} }, removeEvent:function (obj,evType,fn){ if(obj.removeEventListener){ obj.removeEventListener(evType,fn,false); return true; }else if(obj.detachEvent){ var r=obj.detachEvent("on"+evType,fn); return r; }else{return false;} }, getEvent:function (e) { e=window.event||e; e.leftButton=false; if(e.srcElement==null && e.target!=null) { e.srcElement=e.target; e.leftButton=(e.button==1); }else if(e.target==null && e.srcElement!=null){ e.target=e.srcElement; e.leftButton=(e.button==0); }else if(e.srcElement!=null && e.target!=null){ }else{return null} if(document.body && document.documentElement) { e.mouseX=e.pageX||(e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)); e.mouseY=e.pageY||(e.clientY+Math.max(document.body.scrollTop,document.documentElement.scrollTop)); }else{ e.mouseX=-1; e.mouseY=-1; } return e; }, stopEvent:function (e) { if(e && e.cancelBubble!=null) { e.cancelBubble=true; e.returnValue=false; } if(e && e.stopPropagation && e.preventDefault) { e.stopPropagation(); e.preventDefault(); } return false; } }; ycn.EventCache=function() { var listEvents=[]; return { listEvents:listEvents,add:function (node,sEventName,fHandler,bCapture){ listEvents[listEvents.length]=arguments; },flush:function (){ var i,item; for(i=listEvents.length-1;i>=0;i=i-1) { item=listEvents[i]; if(item[0].removeEventListener){item[0].removeEventListener(item[1],item[2],item[3]);}; if(item[1].substring(0,2)!="on"){item[1]="on"+item[1];}; if(item[0].detachEvent){item[0].detachEvent(item[1],item[2]);}; item[0][item[1]]=null; }; } }; }(); /*这里*/ var _rnd=Math.random(); var pa_m= {mail_api:""+_rnd,album_api:""+_rnd,mus_api:""+_rnd,weath_api:""+_rnd,fin_api:""+_rnd,myweb_api:""+_rnd,is_request:true,conobj:null,pa_panel:null,pa_con_height:100,pa_cur_con:null,pa _cur_pre:null,close_timer:null,wait_timer:null,wait_close_timer:null,is_in_anim:false,is_in_pa:true,is_load_da:false,musicbox:{noconid:"pamus_no",conid:"pamus_con"}};function string_len(str,len){if(str.length>len){return str.substring(0,len)+"..";}return str;} function pa_preview_cont(pa,id){ if(pa_m.conobj!=null && pa_m.is_load_da){ycn.Connect.abort(pa_m.conobj);} var cb={scope:this,success:null,failure:null,arguments:null}; pa.innerHTML=pa_m.loadstr; pa_m.is_load_da=true; switch(id) { case 'pamail': var m_html="<div class='pasmscon'><b>易迅资源聚合网</b>易迅资源聚合网</b>易迅资源聚合网<br/><br/></div>"; pa.innerHTML=m_html; break; case 'paalb': var m_html="<div class='pasmscon'><b>易迅资源聚合网</b>易迅资源聚合网</b>易迅资源聚合网<br/><br/></div>"; pa.innerHTML=m_html; break; case 'pamus': var m_html="<div class='paemailcon'>易迅资源聚合网<br/>易迅资源聚合网<br/>易迅资源聚合网<br/></div>"; pa.innerHTML=m_html; break; case 'paweath': var m_html="<div class='paqqcon'>易迅资源聚合网<br/>易迅资源聚合网<br/>易迅资源聚合网<br/></div>"; pa.innerHTML=m_html; break; case 'pafin': var m_html="<div class='pafaxcon'>易迅资源聚合网<br/>易迅资源聚合网<br/><br/></div>"; pa.innerHTML=m_html; break; case 'pamyw': var m_html="<div class='patxcon'><b>易迅资源聚合网</b>易迅资源聚合网<br/><b>易迅资源聚合网</b>易迅资源聚合网<br/><b>易迅资源聚合网</b>易迅资源聚合网 <br/></div>"; pa.innerHTML=m_html; break; default:pa_m.is_load_da=false; pa.innerHTML=pa_m.warnstr; break; }; } function disp_pa_preview(el){ if(!pa_m.is_in_pa||pa_m.pa_cur_pre==el.id){return ;} var p=el.parentNode; while(p.tagName.toLowerCase()!='ul' && p.tagName.toLowerCase()!='body'){p=p.parentNode;} if(p.tagName.toLowerCase()!='ul'){return ;} var con=ycn.Common.getEl(p.id+"previewdiv"); if(!con){return ;} pa_m.pa_cur_pre=el.id; if(pa_m.pa_cur_con!=null && pa_m.pa_cur_con!=con){ con.innerHTML=''; var o_con=pa_m.pa_cur_con; o_con.innerHTML=''; if(ycn.Common.getEl(o_con.id.replace("previewdiv",""))){ var o_tabs=ycn.Common.getEl(o_con.id.replace("previewdiv","")); o_tabs.className="patabslst "+o_tabs.id; } var m=(o_con.offsetHeight)?o_con.offsetHeight:pa_m.pa_con_height; o_con.style.visibility="hidden"; o_con.style.overflow="hidden"; var close_con=function (){ m-=30; if(m<=0){ o_con.style.height=0; o_con.style.display="none"; window.clearInterval(tt_1) }else{ o_con.style.height=m+"px"; } } var tt_1=window.setInterval(close_con,1); } var class_name=p.id+"_"+el.id; el.parentNode.parentNode.className=(el.parentNode.parentNode.className.indexOf(class_name)>0)?el.parentNode.parentNode.className:"patabslst "+class_name; var n=(con.offsetHeight)?con.offsetHeight:0; pa_m.is_in_anim=true; pa_m.pa_cur_con=con; con.style.visibility="visible"; con.style.display="block"; con.style.overflow="hidden"; var open_con=function(){ n+=30; if(n>=pa_m.pa_con_height){ con.style.height=pa_m.pa_con_height+"px"; con.style.overflow="visible"; pa_m.is_in_anim=false; pa_preview_cont(con,el.id); window.clearInterval(tt_0); }else{con.style.height=n+"px";} } var tt_0=window.setInterval(open_con,1); } function do_wait_open(e){ if(pa_m.is_in_anim||pa_m.is_in_pa){return ;} if(ycn.Common.isIE()){var el=window.event.srcElement;}else{var el=this;} while(el.tagName.toLowerCase()!='li' && el.tagName.toLowerCase()!='body'){el=el.parentNode;} if(el.tagName.toLowerCase()!='li'){return ;} el=el.getElementsByTagName('a')[0]; if(pa_m.wait_timer){window.clearTimeout(pa_m.wait_timer);} pa_m.wait_timer=window.setTimeout(function (){disp_pa_preview(el);},200); } function keep_pre_con(e){ if(pa_m.is_in_anim||pa_m.is_in_pa){return ;} if(pa_m.wait_close_timer!=null){window.clearTimeout(pa_m.wait_close_timer);} if(pa_m.wait_timer){window.clearTimeout(pa_m.wait_timer);} ycn.Event.stopEvent(ycn.Event.getEvent(e)); } function keep_pa_preview(e){ pa_m.is_in_pa=true; if(pa_m.wait_close_timer!=null){window.clearTimeout(pa_m.wait_close_timer);} ycn.Event.stopEvent(ycn.Event.getEvent(e)); } function close_pa_preview(e){ pa_m.is_in_pa=false; pa_m.wait_close_timer=window.setTimeout(function (){do_close_pa(e)},2000); ycn.Event.stopEvent(ycn.Event.getEvent(e)); } function do_close_pa(e){ if(pa_m.is_in_pa){return ;} if(pa_m.is_in_anim){return ;} pa_m.is_in_anim=true; var o_con=pa_m.pa_cur_con; if(!o_con){pa_m.is_in_anim=false;return ;} if(ycn.Common.getEl(o_con.id.replace("previewdiv",""))){ var o_tabs=ycn.Common.getEl(o_con.id.replace("previewdiv","")); o_tabs.className="patabslst "+o_tabs.id; } var m=(o_con.offsetHeight)?o_con.offsetHeight:pa_m.pa_con_height; o_con.innerHTML=''; o_con.style.visibility="hidden"; o_con.style.overflow="hidden"; var close_con=function (){ m-=30; if(m<=0){ o_con.style.height=0; o_con.style.display="none"; pa_m.is_in_anim=false; pa_m.pa_cur_con=null; pa_m.pa_cur_pre=null; window.clearInterval(pa_m.close_timer); }else{o_con.style.height=m+"px";} } pa_m.close_timer=window.setInterval(close_con,1); } function init_pa_tabs(){ var pa=ycn.Common.getEl('pabd'); var patabs1=ycn.Common.getEl('patabs1'); var patabs2=ycn.Common.getEl('patabs2'); if(!pa||!patabs1||!patabs2)return; pa_m.pa_panel=pa; var prediv=new Array; prediv[0]=ycn.Common.getElByClassName('div','papreviewdiv',1,pa); prediv[1]=ycn.Common.getElByClassName('div','papreviewdiv',2,pa); if(!prediv[0]||!prediv[1]){return ;} var tabs1=patabs1.getElementsByTagName('li'); var tabs2=patabs2.getElementsByTagName('li'); for(var i=0;i<tabs1.length;i++){ycn.Event.addEvent(tabs1[i],'mouseover',do_wait_open);} for(var i=0;i<tabs2.length;i++){ycn.Event.addEvent(tabs2[i],'mouseover',do_wait_open);} ycn.Event.addEvent(pa,'mouseout',close_pa_preview); ycn.Event.addEvent(pa,'mouseover',keep_pa_preview); ycn.Event.addEvent(prediv[0],'mouseover',keep_pre_con); ycn.Event.addEvent(prediv[1],'mouseover',keep_pre_con); if(ycn.Common.getEl('patop')){ycn.Event.addEvent(ycn.Common.getEl('patop'),'mouseover',function (){if(pa_m.wait_timer){clearTimeout(pa_m.wait_timer);}});} } </script> </head> <body> <br /> <div class="pabdt"></div> <div class="papanel"> <div id="pabd"> <div id="patop"> <div class="patopl"><a href="www.webdm.cn"><strong>www.webdm.cn</strong></a></div> <div class="patopr"></div> </div> <div class="patabs"> <ul id="patabs1" class="patabslst patabs1"> <li><a id="pamail" href="#" class="icomus"><strong>音乐</strong></a></li> <li><a id="paalb" href="#" class="icoalb"><strong>相册</strong></a></li> <li><a id="pamus" href="#" class="icomail"><strong>邮箱</strong></a></li> </ul> <div id="patabs1previewdiv" class="papreviewdiv"></div> </div> <div class="patabs"> <ul id="patabs2" class="patabslst patabs2"> <li><a id="paweath" href="#" class="icoalqq"><strong>天气</strong></a></li> <li><a id="pafin" href="#" class="icofin"><strong>股市</strong></a></li> <li><a id="pamyw" href="#" class="icomailn"><strong>简装</strong></a></li> </ul> <div id="patabs2previewdiv" class="papreviewdiv"></div> </div> </div> </div> <div class="pabdb"></div> <script type="text/javascript">init_pa_tabs();</script> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/a0c8aa71-a69c-4622-a399-e0c95f3ec1da.html
