鼠标滑动选项卡多点调用特效果

最新推荐文章于 2025-06-11 13:11:47 发布
原创最新推荐文章于 2025-06-11 13:11:47 发布 · 149 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#BBS #XHTML #HTML
WEB前端专栏收录该内容
13 篇文章
订阅专栏
本文介绍了一种使用HTML和JavaScript实现的滑动效果案例，通过鼠标悬停切换不同的栏目来展示对应的内容区域，适用于创建交互式的网页导航栏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网易滑动效果！一个js，页面任意滑动数量、任意调用</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 #CCCCCC;
}
.w936{
width:936px;
clear:both;
height: 120px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
}
.normaltab   {
color:#1F3A87;
}
.hovertab    {
color:#FF0000;
background-color: #99CC00;
}
.dis{display:block;}
.undis{display:none;}
    .tabs {
      width:100%;
      background:#BBD9EE;
      font-size:93%;
      line-height:normal;
      }
    .tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
      }
    .tabs li {
display:inline;
margin:0;
padding:0;
cursor: pointer;
      }
    .tabs a {
      float:left;
      background:url("http://bbs.blueidea.com/attachments/2007/5/26/20070526_e5709086236b6748bd44RHeT4cMaUlhU.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    .tabs a span {
      float:left;
      display:block;
      background:url("http://bbs.blueidea.com/attachments/2007/5/26/20070526_d21a8820e716ac79627fcBJbOC8dQGfU.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    .tabs a span {float:none;}
    .tabs a:hover span {
      color:#FF9834;
      }
    .tabs a:hover {
      background-position:0% -42px;
      }
    .tabs a:hover span {
      background-position:100% -42px;
      }
.clear{clear:both;height:1%;}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function g(o){return document.getElementById(o);}
function HoverLi(n)
{
for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
g('tbc_0'+n).className='dis';g('tb_'+n);
}
//-->
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_ tabs">
    <ul>
     <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航dfgdfgdfgdfgdfg</span></a>< /li>
     <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li>
    </ul>
    <div class="clear"></div>
</div>
<div class="ctt">
   <div class="dis" id="tbc_01">内容1</div>
   <div class="undis" id="tbc_02">内容2</div>
   <div class="undis" id="tbc_03">内容3</div>
   <div class="undis" id="tbc_04">内容4</div>
   <div class="undis" id="tbc_05">内容5</div>
   <div class="undis" id="tbc_06">内容6</div>
   <div class="undis" id="tbc_07">内容7</div>
   <div class="undis" id="tbc_08">内容8</div>
</div>
</div>
<div class="w936">
<div id="tb_" class="tb_ tabs">
    <ul>
     <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li>
    </ul>
    <div class="clear"></div>
</div>
<div class="ctt">
   <div class="dis" id="tbc_09">内容9</div>
   <div class="undis" id="tbc_010">内容10</div>
   <div class="undis" id="tbc_011">内容11</div>
   <div class="undis" id="tbc_012">内容12</div>
   <div class="undis" id="tbc_013">内容13</div>
   <div class="undis" id="tbc_014">内容14</div>
   <div class="undis" id="tbc_015">内容15</div>
   <div class="undis" id="tbc_016">内容16</div>
</div>
</div>
<div class="w936">
<div id="tb_" class="tb_ tabs">
    <ul>
     <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li>
     <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li>
    </ul>
    <div class="clear"></div>
</div>
<div class="ctt">
   <div class="dis" id="tbc_017">内容17</div>
   <div class="undis" id="tbc_018">内容18</div>
   <div class="undis" id="tbc_019">内容19</div>
   <div class="undis" id="tbc_020">内容20</div>
   <div class="undis" id="tbc_021">内容21</div>
   <div class="undis" id="tbc_022">内容22</div>
   <div class="undis" id="tbc_023">内容23</div>
   <div class="undis" id="tbc_024">内容24</div>
</div>
</div>
</body>
</html>