给大家一段无JS完全用CSS去实现的方法
引用页面为http://www.uini.org/blog/1-Mini% ... 20Like%20Yahoo!.htm
不是本人的站。是鸟老大的。
第二种就是楼主共享的这种
- <!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'><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.htmlrss.com"><strong>www.htmlrss.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>
[ 本帖最后由 poplong 于 2007-5-30 22:02 编辑 ] |
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
