查看: 30899|回复: 1
打印 上一主题 下一主题

CSS共享雅虎右上滑动选项卡代码片段

[复制链接]
跳转到指定楼层
1#
发表于 2007-10-8 10:35:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
台州网址导航


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mini Tabbed Pages Like Yahoo!</title>
<style type="text/css">
#info {height:500px; position:relative;}
#adsie {position:absolute; bottom:0;}

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/mini_tabbed_pages.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */


#tabs {width:400px; text-align:center; background: url(icon/top.gif); margin:30px 0 0 175px; position:absolute; z-index:500;}
#tabs ul {padding:0; margin:0; width:400px; list-style:none; position:relative;}
#tabs ul li {float:left; display:inline; width:125px; height:53px; margin:0 4px;}
#tabs ul li a.outer {display:block; width:125px; height:49px; border-bottom:1px solid #9c9c9c; text-align:center; line-height:45px; text-decoration:none; text-indent:50px; color:#464; font-weight:bold; margin-bottom:3px; font-size:11px;}

#tabs ul li a.one {background:#fff url(icon/world.jpg) top left no-repeat;}
#tabs ul li a.two {background:#fff url(icon/key.jpg) top left no-repeat;}
#tabs ul li a.three {background:#fff url(icon/mail.jpg) top left no-repeat;}
#tabs ul li a.four {background:#fff url(icon/search.jpg) top left no-repeat;}
#tabs ul li a.five {background:#fff url(icon/profile.jpg) top left no-repeat;}
#tabs ul li a.six {background:#fff url(icon/draw.jpg) top left no-repeat;}
#tabs ul li div {display:none;}

#tabs ul li:hover {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;}

#tabs ul li:hover > a.outer {color:#000; background-position:0 -55px; height:55px; cursor:default;}

* html #tabs ul li a.outer:hover {padding-bottom:130px; border-bottom:1px solid #fff; height:55px; color:#000; margin-bottom:0;background-position:0 -55px; height:55px; cursor:default;}

#tabs ul li:hover div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:381px; height:118px; border-bottom:3px solid #fff;}
#tabs ul li a:hover div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:381px; height:118px; border-bottom:3px solid #fff;}

#tabs ul li a:hover div.tab_left,
#tabs ul li:hover div.tab_left
{background:#fff url(icon/tab_left.gif);}

#tabs ul li a:hover div.tab_center,
#tabs ul li:hover div.tab_center
{background:#fff url(icon/tab_center.gif);}

#tabs ul li a:hover div.tab_right,
#tabs ul li:hover div.tab_right
{background:#fff url(icon/tab_right.gif);}

.clear {height:0; line-height:0; overflow:hidden;}
#tabs span.base {display:block; height:20px;font-size:10px; color:#bc8f8f; background:url(icon/bottom.gif) bottom;}
#tabs div h5 {font-size:11px; margin-bottom:10px;}
#tabs div p {font-weight:normal; text-align:left; color:#000; margin-top:3px;line-height:12px}
#tabs div a img {border:0;}
#tabs div img.image {float:left; border:0; margin-top:-35px; margin-right:5px;}
#tabs div a.unlock {background:url(icon/unlock.gif); display:block; width:30px; height:30px; margin:0 auto;}
#tabs div a:hover.unlock img {visibility:hidden;}
#tabs p.bold {color:#069; padding-top:5px;}
* html #tabs p.fire {margin-top:-15px;}
* html #tabs form {margin-top:-20px;}
#tabs p.buttons {text-align:center;}
</style>


</head>

<body>

<div id="tabs">
<p class="bold">Mini tabbed pages - 9th February 2007</p>
<ul>
<li><a href="#nogo" class="one outer">WORLD<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_left">
<h5>World Wide Web</h5>
<p>This area can hold anything you like, text, images, forms and even links like this one - <a href="index.html">Main Menu</a>.</p>

</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="two outer">UNLOCK<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_center">
<h5>Unlock the Secrets</h5>
<a href="http://www.w3.org/Style/CSS/" class="unlock" title="Unlock the secrets of CSS at w3.org"><img src="icon/lock.gif" alt="Locked" title="Locked" /></a>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="three outer">MAIL<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_right">
<h5>Email</h5>
<p>Maybe a link to your emails or a form asking to login to retrieve your emails, or even a link to a <a href="http://www.cssplay.co.uk/w3c/contact.html">Contact Page</a>.</p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
<ul>
<li><a href="#nogo" class="four outer">SEARCH<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_left">
<h5>Search This Site</h5>
<p>You can add a search form here.</p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="five outer">PROFILE<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_center">
<h5>Your Profile</h5>
<form id="two" action="..." method="post">
<fieldset id="personal">
    <label for="login">login : </label>
    <input name="login" id="login" type="text" tabindex="1" />
</fieldset>
<p class="buttons">
  <input id="button1" type="submit" value="Send" />
  <input id="button2" type="reset" value="Reset" />
</p>
</form>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="six outer">DRAW<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_right">
<h5>Learn how to Draw</h5>
<a href="http://www.adobe.com/products/fireworks/"><img class="image" src="icon/fireworks.gif" alt="Adobe Fireworks 8" title="Adobe Firerworks 8" /></a>
<p class="fire">Get top-quality design results. Take creative control with seamless vector and bitmap editing.</p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
<span class="base">?2007 Stu Nicholls - All rights reserved</span>
</div>
</body>
</html>


引用页面为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() repeat-x;border-left:1px solid #7bbdff;border-right:1px solid #7bbdff;font-family:arial;}
#pabd{padding-bottom:.35em;background:url() no-repeat top left;}
#pabd,.paft{clear:both;overflow:hidden;}
#patop{height:25px;line-height:20px;overflow:hidden;}

/*顶部圆角开始*/
.pabdt{background:url() 0 0 no-repeat;width:350px;height:4px;overflow:hidden;}
.pabdb{background:url() 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() 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() 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() 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() 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() 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() 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() 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() 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() 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() 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() 1em 1.5em no-repeat;padding:1.5em 0 0 8em;;}
.patxcon strong,.pamywebcon strong{color:#ff0000;}

/*背景开始*/
.patabs2,.patabs1{background:url() 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() 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() 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() 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.className===n&&s===num){return itm;}else if(itm.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;
                                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,'mouseover',do_wait_open);}
        for(var i=0;i<tabs2.length;i++){ycn.Event.addEvent(tabs2,'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>
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
2#
 楼主| 发表于 2007-10-8 10:38:57 | 只看该作者
台州网址导航
<!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() repeat-x;border-left:1px solid #7bbdff;border-right:1px solid #7bbdff;font-family:arial;}
#pabd{padding-bottom:.35em;background:url() no-repeat top left;}
#pabd,.paft{clear:both;overflow:hidden;}
#patop{height:25px;line-height:20px;overflow:hidden;}

/*顶部圆角开始*/
.pabdt{background:url() 0 0 no-repeat;width:350px;height:4px;overflow:hidden;}
.pabdb{background:url() 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() 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() 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() 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() 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() 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() 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() 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() 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() 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() 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() 1em 1.5em no-repeat;padding:1.5em 0 0 8em;;}
.patxcon strong,.pamywebcon strong{color:#ff0000;}

/*背景开始*/
.patabs2,.patabs1{background:url() 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() 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() 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() 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.className===n&&s===num){return itm;}else if(itm.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;
                                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,'mouseover',do_wait_open);}
        for(var i=0;i<tabs2.length;i++){ycn.Event.addEvent(tabs2,'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>
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州朗动科技(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事:政企网站,系统平台,微信公众号,各类小程序,手机APP客户端,浙里办微应用,浙政钉微应用、主机域名、虚拟空间、后期维护等服务,满足不同企业公司的需求,是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2026 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

快速回复 返回顶部 返回列表