哪位知道，MSN网页中的“我的白领生活”栏目中的“股票、签名、天气....”是如何做的？

搜索CSS滑动门或者是JS滑动门或是滑动门那个特效就是滑动门

解决方案 »

  1.   

    看看是不是你需要的：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <style type="text/css"> 
    <!-- ol, ul { 
        list-style: none; 
    } .col2 { 
        float: left; 
        margin-right: 10px; } .box{ 
    border:1px solid #99BBDD; 
    margin:2px;
    float:left; 
    } 
    .box_1 ul{ 
    padding:5px; 
    } 
    .box_title{ 
    background:url(news_bg.gif); 
        position: relative; 
        height: 28px; 
    } 
    .box_title h3 { 
        height: 26px; 
        line-height: 26px; 
        margin: 1px 1px 0; 
        padding: 0 10px; 
        font-weight: bold; 
        font-size: 120%; 
        color: #275c91; 
    } 
    .box_title span { 
    float:right; 
    padding-top:5px; 
    padding-right:5px; 
    } 
    .box .tab h3, 
    .box .tab ul.tabitem, 
    .box .tab ul.tabitem li { 
        float: left; 
    font-size:12px; 
    } 
    .box .tab ul.tabitem { 
        line-height: 2.3; 
    } 
    .box .tab ul.tabitem li { 
        margin: 0 -1px -1px 0; 
        position: relative; 
    } 
    .box .tab ul.tabitem a { 
        display: block; 
        padding: 0 5px; 
    } .box .tab ul.tabitem a.current, 
    .box .tab ul.tabitem a:hover { 
        border: solid #99bbdd; 
        border-width: 0 1px; 
        padding: 0 4px; 
        background: #fff; 
    } 
    a:link, a:visited { 
        color: #333; 
        text-decoration: none; 
    } .note { 
        margin: 0 15px 10px; 
    color:#666666; 
    } 
    .note span{ 
    float:right; 
    } 
    .disable { 
        display: none; 
    } --> 
    </style> 
    <SCRIPT language=javascript> 
    function doClick_down(o){ 
     o.className="current"; 
     var j; 
     var id; 
     var e,k=0; 
     if(parseInt(o.id.charAt(4))>4)
         k=4;
          for(var i=1+k;i <=4+k;i++){ 
       id ="down"+i; 
       j = document.getElementById(id); 
       e = document.getElementById("d_con"+i); 
       if(id != o.id){ 
         j.className=""; 
         e.style.display = "none"; 
       }else{ 
    e.style.display = "block"; 
       } 
      }
     
     } 
      </SCRIPT> </head><body>
    <div class="col2" style="width: 428px; height: 288px"> 
           <div class="box"> 
             <div class="box_title tab"> <h3>最新下载 </h3> 
                 <ul class="tabitem"> 
                     <li> <a href="http://down.chinaz.com/class/3_1.htm" target="_blank" class="current" id="down1" onmouseover="javascript:doClick_down(this)">ASP源码 </a> </li> 
                     <li> <a href="http://down.chinaz.com/class/4_1.htm" target="_blank" id="down2" onmouseover="javascript:doClick_down(this)">.NET源码 </a> </li> 
                     <li> <a href="http://down.chinaz.com/class/5_1.htm" target="_blank" id="down3" onmouseover="javascript:doClick_down(this)">PHP源码 </a> </li> 
                     <li> <a href="http://down.chinaz.com/class/10_1.htm" target="_blank" id="down4" onmouseover="javascript:doClick_down(this)">软件 </a> </li> 
                 </ul> 
             </div> 
             <div class="box_1"> 
                 <ul class="down_box" style="display:block;" id="d_con1">Asp源码列表装载中 </ul> 
                 <ul class="down_box disable" id="d_con2">.Net源码列表装载中... </ul> 
                 <ul class="down_box disable" id="d_con3">Php源码列表装载中... </ul> 
                 <ul class="down_box disable" id="d_con4">常用软件源码列表装载中... </ul> 
              </div> 
          </div> 
           <div class="box"> 
             <div class="box_title tab"> <h3>最新下载 </h3> 
                 <ul class="tabitem"> 
                     <li> <a href="http://down.chinaz.com/class/3_1.htm" target="_blank" class="current" id="down5" onmouseover="javascript:doClick_down(this)">ASP源码 </a> </li> 
                     <li> <a href="http://down.chinaz.com/class/4_1.htm" target="_blank" id="down6" onmouseover="javascript:doClick_down(this)">.NET源码 </a> </li> 
                     <li> <a href="http://down.chinaz.com/class/5_1.htm" target="_blank" id="down7" onmouseover="javascript:doClick_down(this)">PHP源码 </a> </li> 
                     <li> <a href="http://down.chinaz.com/class/10_1.htm" target="_blank" id="down8" onmouseover="javascript:doClick_down(this)">软件 </a> </li> 
                 </ul> 
             </div> 
             <div class="box_1"> 
                 <ul class="down_box" style="display:block;" id="d_con5">ListOne... </ul> 
                 <ul class="down_box disable" id="d_con6">ListTwo...</ul> 
                 <ul class="down_box disable" id="d_con7">ListThree... </ul> 
                 <ul class="down_box disable" id="d_con8">ListFour... </ul> 
              </div> 
          </div> </body>
    </html>