非常不错的滑动门效果（精美-从126邮箱扣出来的）-财经-理财-基金-行情-博客-css Js javascript 滑门效果

<!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" />
<title>非常不错的滑动门窗口效果（精美-从126邮箱扣出来的）</title>
<style type="text/css">
<!--
body,div,img,a,b,p,form,table,tr,td{text-align: center; margin: 0px;padding: 0px;list-style-type:none;font-size:12px;color:#0c0c0b; line-height:180%}
body{background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/line_d.gif) bottom repeat-x; background-color:#FFFFFF}
a{text-decoration:none;}
a:hover{text-decoration:underline; color:#0f9327}
.a1{text-decoration:underline; color:#b7f124}
.a1:hover{text-decoration:underline; color:#f8efae}
.f1{font-size:14px;}
.c1{color:#ff7200}
.c2{color:#FFFFFF}
.c3{color:#f8efae}
.c4{color:#32633b}
.c4{ color:#0F9327}

         .ent_l{width:190px; height:325px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/tu_l.gif) no-repeat; float:left;}
       .ent_c{width:342px; height:325px; background-color:#FFFFFF; float:left; overflow:hidden}
           .bq{width:342px; height:71px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_d.gif) no-repeat;}
                       .bq ul{padding:0px; margin:0px; list-style-type:none;}
             .bq li{width:88px; height:23px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_2.gif) 0px 1px no-repeat; padding-top:3px; margin-top:43px; text-align:center; float:left; cursor:pointer;}
                 .bq li a{font-size:12px; font-weight:bold; color:#59814c;}
               .bq li a:hover{text-decoration:none;}
                         .bq li.on{background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/bq_1.gif) no-repeat top; color:#fff;}
                    .bq li.on a{color:#fff;}
        
         .bq_d{width:100%; height:253px; background:url(http://mimg.163.com/hd/126/070521_126xy3.0/img/line_2.gif) right repeat-y; border-bottom:#0f9327 1px solid; text-align:left}
              .bq_n{width:80%; padding-top:15px; text-align:center; margin-left:30px}
            .bq_d .c4{ text-align:left}
  .clear{ clear:both; font-size:0; height:0}
  
   

-->
</style>
<script language="JavaScript">
<!--
var nTime = 3;
var nFocus= 0;
var bFlag = false;
var aLiTab , aDivTab;

/*自动跳转
function fAutoSwitch(){
  var n = nFocus + 1;
  if(n >=3){
    n = 0;
  }
  if(!bFlag){
    aLiTab[n].onmouseover();
    bFlag = false;
  }
}
*/window.onload = function(){
  var $ = function($){
    return document.getElementById($);
  };
  aLiTab = $("oUlTab").getElementsByTagName("li");
  aDivTab = [$("oDivTab1") , $("oDivTab2") , $("oDivTab3")];
  for(var i=0;i<aLiTab.length;i++){
    (function(i){
      var t = aLiTab[i];
      t.onmouseover = function(){
        if(nFocus != i){
          aLiTab[nFocus].className = "";
          aDivTab[nFocus].style.display = "none";
          nFocus = i;
          aLiTab[nFocus].className = "on";
          aDivTab[nFocus].style.display = "";
        }
        bFlag = true;
      };
      t.onmouseout = function(){
        bFlag = false;
      };
    })(i);
  }
};

//-->
</script>
</head>
<body>

          
         <div class="ent_c">
               <div class="bq">
                <ul id="oUlTab"><li class="on" ><a href="#">多窗口操作</a></li>
                            <li ><a href="#">超快速度</a></li>
                          <li ><a href="#">自动保存</a></li>
                          </ul>
                     </div>

            <!---多窗口操作--->
            <div class="bq_d" id="oDivTab1">
                <div class="bq_n">
              <img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/dbq.gif" /><br />
              　　<div class="c4">　　逍遥3.0版本支持多窗口操作，你可以在不同邮件之间轻松快速切换。<br />
     　　新版本有点像时下最流行的多页面式IE浏览器，可以在一个窗口中同时打开多个页面，切换响应速度之快令人惊奇，大大提高了工作效率。<br />
</div>
              </div>             
           </div>

           <div class="bq_d" id="oDivTab2" style="display:none">
                <div class="bq_n">
              <img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/cksd.gif" /><br />
              　　<div class="c4">　　让邮箱的速度越来越快一直是我们追求的目标。逍遥3.0大量页面使用了创新Ajax技术， 同等网络环境下，页面响应时间减少90％以上，快来体验前所未有的快速邮箱操作吧！<br />
</div>
              </div>             
           </div>

           <div class="bq_d" id="oDivTab3" style="display:none">
                <div class="bq_n">
              <img src="http://mimg.163.com/hd/126/070521_126xy3.0/img/zdbc.gif" /><br />
              　　<div class="c4">　　你再也不用担心辛苦所写的邮件会因网络、电力中断等问题而丢失。126逍遥3.0邮箱系统会自动保存正在录入的邮件，从此高枕无忧。<br />
</div>
              </div>             
           </div>

         </div>
         
         
</body>
</html>

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

<!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" />
<title>Semiall.com</title>
<link href="http://www.semiall.com/semiall_v2img/public.css" rel="stylesheet" type="text/css" />
<link href="http://www.semiall.com/semiall_v2img/index.css" rel="stylesheet" type="text/css" />
</head>
<script language="javascript" type="text/javascript">
<!--
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
 document.getElementById(x).style.display = "none"
 document.getElementById(y).style.display = "block"
}
 -->
</script>
<body>
<div id="index_search">
    <div id="index_search_1">
      <div id="index_search_2">
    <!--search start-->
    <div id="search_card1" style="display:block">
        <div class="index_search_top">
    <div onmouseover="javascript:changeMc('search_card1','search_card1')" class="search_btn_0">供求</div>
    <div onmouseover="javascript:changeMc('search_card1','search_card2')" class="search_btn_3">新闻</div>
    <div onmouseover="javascript:changeMc('search_card1','search_card3')" class="search_btn_3">黄页</div>
    <div onmouseover="javascript:changeMc('search_card1','search_card4')" class="search_btn_3">产品</div>
    <div onmouseover="javascript:changeMc('search_card1','search_card5')" class="search_btn_3">论坛</div>
    <div onmouseover="javascript:changeMc('search_card1','search_card6')" class="search_btn_3">互联网</div>
    </div>
        <div class="index_search_bottom">1</div>
    </div>
    <!--search end-->
    <!--search 2start-->
    <div id="search_card2" style="display:none">
        <div class="index_search_top">
    <div onmouseover="javascript:changeMc('search_card2','search_card1')" class="search_btn_1">供求</div>
    <div class="search_btn_2">新闻</div>
    <div onmouseover="javascript:changeMc('search_card2','search_card3')" class="search_btn_3">黄页</div>
    <div onmouseover="javascript:changeMc('search_card2','search_card4')" class="search_btn_3">产品</div>
    <div onmouseover="javascript:changeMc('search_card2','search_card5')" class="search_btn_3">论坛</div>
    <div onmouseover="javascript:changeMc('search_card2','search_card6')" class="search_btn_3">互联网</div>
    </div>
        <div class="index_search_bottom">2</div>
    </div>
    <!--search end-->
    <!--search3 start-->
    <div id="search_card3" style="display:none">
        <div class="index_search_top">
    <div onmouseover="javascript:changeMc('search_card3','search_card1')" class="search_btn_1">供求</div>
    <div onmouseover="javascript:changeMc('search_card3','search_card2')" class="search_btn_3">新闻</div>
    <div class="search_btn_2">黄页</div>
    <div onmouseover="javascript:changeMc('search_card3','search_card4')" class="search_btn_3">产品</div>
    <div onmouseover="javascript:changeMc('search_card3','search_card5')" class="search_btn_3">论坛</div>
    <div onmouseover="javascript:changeMc('search_card3','search_card6')" class="search_btn_3">互联网</div>
    </div>
        <div class="index_search_bottom">3</div>
    </div>
    <!--search end-->
    <!--search4 start-->
    <div id="search_card4" style="display:none">
        <div class="index_search_top">
    <div onmouseover="javascript:changeMc('search_card4','search_card1')" class="search_btn_1">供求</div>
    <div onmouseover="javascript:changeMc('search_card4','search_card2')" class="search_btn_3">新闻</div>
    <div onmouseover="javascript:changeMc('search_card4','search_card3')" class="search_btn_3">黄页</div>
    <div class="search_btn_2">产品</div>
    <div onmouseover="javascript:changeMc('search_card4','search_card5')" class="search_btn_3">论坛</div>
    <div onmouseover="javascript:changeMc('search_card4','search_card6')" class="search_btn_3">互联网</div>
    </div>
        <div class="index_search_bottom">4</div>
    </div>
    <!--search end-->
    <!--search5 start-->
    <div id="search_card5" style="display:none">
        <div class="index_search_top">
    <div onmouseover="javascript:changeMc('search_card5','search_card1')" class="search_btn_1">供求</div>
    <div onmouseover="javascript:changeMc('search_card5','search_card2')" class="search_btn_3">新闻</div>
    <div onmouseover="javascript:changeMc('search_card5','search_card3')" class="search_btn_3">黄页</div>
    <div onmouseover="javascript:changeMc('search_card5','search_card4')" class="search_btn_3">产品</div>
    <div class="search_btn_2">论坛</div>
    <div onmouseover="javascript:changeMc('search_card5','search_card6')" class="search_btn_3">互联网</div>
    </div>
        <div class="index_search_bottom">5</div>
    </div>
    <!--search end-->
    <!--search6 start-->
    <div id="search_card6" style="display:none">
        <div class="index_search_top">
    <div onmouseover="javascript:changeMc('search_card6','search_card1')" class="search_btn_1">供求</div>
    <div onmouseover="javascript:changeMc('search_card6','search_card2')" class="search_btn_3">新闻</div>
    <div onmouseover="javascript:changeMc('search_card6','search_card3')" class="search_btn_3">黄页</div>
    <div onmouseover="javascript:changeMc('search_card6','search_card4')" class="search_btn_3">产品</div>
    <div onmouseover="javascript:changeMc('search_card6','search_card5')" class="search_btn_3">论坛</div>
    <div class="search_btn_2">互联网</div>
    </div>
        <div class="index_search_bottom">6</div>
    </div>
    <!--search end-->
      </div>
    </div>
  </div>
<div id="index_yp">
  <!--yp1 start-->
    <div id="yp_card1" style="display:block">    
      <div class="index_yp_card">
        <div class="yp_card_0">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card2')" class="yp_card_3">生产</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card3')" class="yp_card_3">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card4')" class="yp_card_3">服务</div>
        <div onmouseover="javascript:changeMc('yp_card1','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
        <div class="yp_main_content">
          <dt class="color_a_company"><a href="#">上海安平静电技术合作公司</a></dt>
          <dd class="color_a_666"><a href="#">贸易型</a> | 注册资金50万 | <span class="color_red">认证<img src="http://www.semiall.com/template/semiall_v2img/yp_yeschecked.png" width="12" height="13" align="absmiddle"/></span></dd>
        </div>
<div class="yp_main_list">Tips: 企业登陆 如何认证 我要推荐</div>
      </div>
    </div>
  <!--end-->
  <!--yp2 start-->
    <div id="yp_card2" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card2','yp_card1')" class="yp_card_1">推荐</div>
        <div class="yp_card_2">生产</div>
        <div onmouseover="javascript:changeMc('yp_card2','yp_card3')" class="yp_card_3">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card2','yp_card4')" class="yp_card_3">服务</div>
        <div onmouseover="javascript:changeMc('yp_card2','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">生产</div>
    </div>
  <!--end-->
  <!--yp3 start-->
    <div id="yp_card3" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card3','yp_card1')" class="yp_card_1">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card3','yp_card2')"class="yp_card_6">生产</div>
        <div class="yp_card_2">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card3','yp_card4')" class="yp_card_3">服务</div>
        <div onmouseover="javascript:changeMc('yp_card3','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">贸易</div>
    </div>
  <!--end-->
  <!--yp4 start-->
    <div id="yp_card4" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card4','yp_card1')" class="yp_card_1">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card4','yp_card4')" class="yp_card_6">生产</div>
        <div onmouseover="javascript:changeMc('yp_card4','yp_card3')" class="yp_card_6">贸易</div>
        <div class="yp_card_2">服务</div>
        <div onmouseover="javascript:changeMc('yp_card4','yp_card5')" class="yp_card_5">综合</div>
      </div>
      <div class="index_yp_main">服务</div>
    </div>
  <!--end-->
  <!--yp5 start-->
    <div id="yp_card5" style="display:none">    
      <div class="index_yp_card">
        <div onmouseover="javascript:changeMc('yp_card5','yp_card1')" class="yp_card_1">推荐</div>
        <div onmouseover="javascript:changeMc('yp_card5','yp_card2')" class="yp_card_6">生产</div>
        <div onmouseover="javascript:changeMc('yp_card5','yp_card3')" class="yp_card_6">贸易</div>
        <div onmouseover="javascript:changeMc('yp_card5','yp_card4')" class="yp_card_6">服务</div>
        <div class="yp_card_4">综合</div>
      </div>
      <div class="index_yp_main">综合</div>
    </div>
  <!--end-->
  </div>
</body>
</html>

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

非常不错的滑动门效果（精美-从126邮箱扣出来的）

Tags: css Js javascript 滑门效果

发布:webskin| 分类:网页相关| 评论:1| 引用:0| 浏览:

本文链接地址：http://www.xldd.com/post/2007/11/21/587.html

日历

最新评论

最近发表

Search

网站目录

赞助商广告

文章归档

	About Us \| Contact Us \| GuestBook \| Search \| Tags \| Rss
股票-财经-理财-基金-行情-软件-商业-金融-证券-博客资料站	Search