防Yahoo的選項卡導航特效_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 菜單導航 >> 防Yahoo的選項卡導航特效

防Yahoo的選項卡導航特效

分類：菜單導航時間：2009-12-31 點擊：

關鍵詞：選項卡|導航|

<!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="PRAGMA" content="NO-CACHE" />
<title>防Yahoo的選項卡導航特效 - www.hbsxmp.com</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.hbsxmp.com/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.hbsxmp.com/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.hbsxmp.com/images/20091231/pabdr.gif) 0 0 no-repeat;width:350px;height:4px;overflow:hidden;}
.pabdb{background:url(http://www.hbsxmp.com/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.hbsxmp.com/images/20091231/tabicmln.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/tabicmln.gif", sizingMethod='crop');}
.icomail{background:url(http://www.hbsxmp.com/images/20091231/tabicml.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/tabicml.gif", sizingMethod='crop');}
.icoalb{background:url(http://www.hbsxmp.com/images/20091231/tabicalb.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/tabicalb.gif", sizingMethod='crop');}
.icomus{background:url(http://www.hbsxmp.com/images/20091231/tabicmus.gif) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/tabicmus.gif", sizingMethod='crop');}
.icofin{background:url(http://www.hbsxmp.com/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.hbsxmp.com/images/20091231/3.gif") 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/3.gif", sizingMethod='crop');}
/*內置圖標開始*/
.pamailcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url(http://www.hbsxmp.com/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.hbsxmp.com/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.hbsxmp.com/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.hbsxmp.com/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.hbsxmp.com/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.hbsxmp.com/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.hbsxmp.com/images/20091231/patabs1.gif) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/patabs1.gif", sizingMethod='crop');}
.patabs1_pamail,.patabs2_paweath{background:url(http://www.hbsxmp.com/images/20091231/patabsa.gif) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/patabsa.gif", sizingMethod='crop');}
.patabs1_paalb,.patabs2_pafin{background:url(http://www.hbsxmp.com/images/20091231/patabsb.gif) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/images/20091231/patabsb.gif", sizingMethod='crop');}
.patabs1_pamus,.patabs2_pamyw{background:url(http://www.hbsxmp.com/images/20091231/patabsc.gif) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.hbsxmp.com/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.hbsxmp.com"><strong>www.hbsxmp.com</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 />
<a href="http://www.hbsxmp.com">網頁代碼站</a> - 最專業的代碼下載網站 - 致力為中國站長提供有質量的代碼！

運行代碼全選代碼復制代碼保存代碼友情提示

網頁代碼站代碼預覽圖片

防Yahoo的選項卡導航特效，代碼有些多，建議封裝單獨一個JS文件調用。

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：JavaScript控制頁面逐漸縮小
下一篇：全兼容純CSS的下拉導航菜單

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕