一款简洁漂亮的CSS滑动门特效

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_30432007

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量133

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/youtianxia/p/4363413.html

本文介绍了如何使用CSS实现简洁漂亮的滑动门特效，并通过HTML和JavaScript提供了完整的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>一款简洁漂亮的CSS滑动门特效丨河北塑胶地板|电影院椅子</title>
    <style media="screen" type="text/css">
    <!--
    *{font-size:12px;}
    html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
    UL{list-style-type:none; margin:0px;}
    /* 标准盒模型 */
    .ttl{height:18px;}
    .ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
    .w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}
    /* TAB 切换效果 */
    .tb_{background-image: url('/html/txdm_2/images/20101005/20101005001.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
    .tb_ ul{height:24px;}
    .tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
    /* 用于控制显示与隐藏的css类 */
    .normaltab   { background-image:url('/html/txdm_2/images/20101005/20101005002.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
    .hovertab    { background-image: url('/html/txdm_2/images/20101005/20101005003.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
    .dis{display:block;}
    .undis{display:none;}
    -->
    </style>
    <script type="text/javascript" language="javascript">
    //<!CDATA[
    function g(o){return document.getElementById(o);}
    function HoverLi(n){
    //如果有N个标签,就将i<=N;
    //本功能非常OK,兼容IE7,FF,IE6;http://www.xiaogezi.cn/ [小鸽子]系列
    for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
    }
    //如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
    //]]>
    </script>
    </head>
    <body>
    <div class="w936">
    <div id="tb_" class="tb_">
    <ul>
    <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
    Tab ①</li>
    <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
    Tab ②</li>
    <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
    Tab ③</li>
    <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
    Tab ④</li>
    <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
    Tab ⑤</li>
    <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
    Tab ⑥</li>
    </ul>
    </div>
    <div class="ctt">
    <div class="dis" id="tbc_01">Tab ① 的内容<br /><img src="/images/m01.jpg" /></div>
    <div class="undis" id="tbc_02">Tab ② 的内容<br /><img src="/images/m02.jpg" /></div>
    <div class="undis" id="tbc_03">Tab ③ 的内容<br /><img src="/images/m03.jpg" /></div>
    <div class="undis" id="tbc_04">Tab ④ 的内容<br /><img src="/images/m04.jpg" /></div>
    <div class="undis" id="tbc_05">Tab ⑤ 的内容<br /><img src="/images/m05.jpg" /></div>
    <div class="undis" id="tbc_06">Tab ⑥ 的内容<br /><img src="/images/m06.jpg" /></div>
    </div>
    </div>
    <hr size="1" noshade="noshade" style="color:#064ca1;margin-top:30px;" />
    </body>
    </html>