教程集 > 脚本编程 > javascript > 正文雅虎的右面的效果

雅虎的右面的效果

发布时间：2023-07-09 编辑：jiaochengji.com

教程集为您提供雅虎的右面的效果等资源，欢迎您收藏本站，我们将为您提供最新的雅虎的右面的效果资源

提示：您可以先修改部分代码再运行

<!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>雅虎</title> <style type="text/css"> body { margin:0; text-align:center;font-size:12px;} .papanel,#pabd,.paft,#patop{width:348px;} .papanel{background:#a5d0fd url([img]http://cn.yimg.com/i/hp/ny/pabg.gif[/img]) repeat-x;border-left:1px solid #7bbdff;border-right:1px solid #7bbdff;font-family:arial;} #pabd{padding-bottom:.35em;background:url([img]http://cn.yimg.com/i/hp/ny/patbg.gif[/img]) no-repeat top left;} #pabd,.paft{clear:both;overflow:hidden;} #patop{height:25px;line-height:20px;overflow:hidden;} /*顶部圆角开始*/ .pabdt{background:url([img]http://cn.yimg.com/i/hp/ny/pabdr.gif[/img]) 0 0 no-repeat;width:350px;height:4px;overflow:hidden;} .pabdb{background:url([img]http://cn.yimg.com/i/hp/ny/pabdr.gif[/img]) 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([img]http://cn.yimg.com/i/hp/ny/ic/tabicmln.gif[/img]) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/ic/tabicmln.gif", sizingMethod='crop');} .icomail{background:url([img]http://cn.yimg.com/i/hp/ny/ic/tabicml.gif[/img]) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/ic/tabicml.gif", sizingMethod='crop');} .icoalb{background:url([img]http://cn.yimg.com/i/hp/ny/ic/tabicalb.gif[/img]) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/ic/tabicalb.gif", sizingMethod='crop');} .icomus{background:url([img]http://cn.yimg.com/i/hp/ny/ic/tabicmus.gif[/img]) 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/ic/tabicmus.gif", sizingMethod='crop');} .icofin{background:url([img]http://cn.yimg.com/i/hp/ny/ic/tabicfin.gif[/img]) 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://cn.yimg.com/i/we/c/3.gif") 0 0 no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/we/c/3.gif", sizingMethod='crop');} /*内置图标开始*/ .pamailcon,.pamywebcon{float:left;text-align:left;line-height:1.5em;background:url([img]http://cn.yimg.com/i/hp/ny/ic/icmla.gif[/img]) 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([img]http://cn.yimg.com/i/hp/ny/ic/icmla.gif[/img]) 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([img]http://cn.yimg.com/i/hp/ny/ic/icmla.gif[/img]) 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([img]http://cn.yimg.com/i/hp/ny/ic/icmla.gif[/img]) 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([img]http://cn.yimg.com/i/hp/ny/ic/icmla.gif[/img]) 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([img]http://cn.yimg.com/i/hp/ny/ic/icmla.gif[/img]) 1em 1.5em no-repeat;padding:1.5em 0 0 8em;;} .patxcon strong,.pamywebcon strong{color:#ff0000;} /*背景开始*/ .patabs2,.patabs1{background:url([img]http://cn.yimg.com/i/hp/ny/patabs1.gif[/img]) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/patabs1.gif", sizingMethod='crop');} .patabs1_pamail,.patabs2_paweath{background:url([img]http://cn.yimg.com/i/hp/ny/patabsa.gif[/img]) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/patabsa.gif", sizingMethod='crop');} .patabs1_paalb,.patabs2_pafin{background:url([img]http://cn.yimg.com/i/hp/ny/patabsb.gif[/img]) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/patabsb.gif", sizingMethod='crop');} .patabs1_pamus,.patabs2_pamyw{background:url([img]http://cn.yimg.com/i/hp/ny/patabsc.gif[/img]) no-repeat;*background:transparent;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cn.yimg.com/i/hp/ny/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'>易迅资源聚合网易迅资源聚合网易迅资源聚合网 </div>";                    pa.innerHTML=m_html;             break;                case 'paalb':             var m_html="<div class='pasmscon'>易迅资源聚合网易迅资源聚合网易迅资源聚合网 </div>";                    pa.innerHTML=m_html;             break;                case 'pamus':             var m_html="<div class='paemailcon'>易迅资源聚合网 易迅资源聚合网 易迅资源聚合网 </div>";                    pa.innerHTML=m_html;             break;                case 'paweath':             var m_html="<div class='paqqcon'>易迅资源聚合网 易迅资源聚合网 易迅资源聚合网 </div>";                    pa.innerHTML=m_html;             break;                case 'pafin':             var m_html="<div class='pafaxcon'>易迅资源聚合网 易迅资源聚合网 </div>";                    pa.innerHTML=m_html;             break;                case 'pamyw':             var m_html="<div class='patxcon'>易迅资源聚合网易迅资源聚合网 易迅资源聚合网易迅资源聚合网 易迅资源聚合网易迅资源聚合网 </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> <div class="pabdt"></div> <div class="papanel">   <div id="pabd">     <div id="patop">       <div class="patopl"></div>       <div class="patopr"></div>     </div>     <div class="patabs">       <ul id="patabs1" class="patabslst patabs1">         <li><a id="pamail" href="#" class="icomus">音乐</a></li>         <li><a id="paalb" href="#" class="icoalb">相册</a></li>         <li><a id="pamus" href="#" class="icomail">邮箱</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">天气</a></li>         <li><a id="pafin" href="#" class="icofin">股市</a></li>         <li><a id="pamyw" href="#" class="icomailn">简装</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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
快速关键词排名百度首页的优化方法
 关于python中的Json模块用法及介绍
 虎牙直播进不去虎牙直播有画面没有声音怎么办
 虎牙直播常见问题汇总
 搜索引擎技术核心揭密(PHP版)
Google PageRank 算法解析
 jquery 模拟雅虎首页的点击对话框效果
 与个人网站拜把做兄弟搜索门户一片光明
 如何ps 2010虎年电子贺卡
 GooglePageRank算法解析

上一篇：滑动展开/收缩广告下一篇：实现表格中隐藏下级表格

[关闭]

雅虎的右面的效果

最近更新

浏览排行