ie421.NET

面对技术，你别无选择，.NET世界是如此精彩，而我们要做的就是：Thinking More
博客园 首页 新随笔 联系 订阅 管理
网易滑动效果！一个js，页面任意滑动数量、任意调用
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>滑动门</title>
  6 <style media="screen" type="text/css">
  7 <!--
  8 *{font-size:12px;}
  9 html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
 10 UL{list-style-type:none; margin:0px;}
 11 .ttl{height:18px;}
 12 .ctt{
 13     height:auto;
 14     padding:6px;
 15     clear:both;
 16     border: 1px solid #CCCCCC;
 17 }
 18 .w936{
 19     width:936px;
 20     clear:both;
 21     height: 120px;
 22     margin-top: 20px;
 23     margin-right: 0;
 24     margin-bottom: 2px;
 25     margin-left: 0;
 26 }
 27 .normaltab   {
 28     color:#1F3A87;
 29 }
 30 .hovertab    {
 31     color:#FF0000;
 32     background-color: #99CC00;
 33 }
 34 .dis{display:block;}
 35 .undis{display:none;}
 36     .tabs {
 37       width:100%;
 38       background:#BBD9EE;
 39       font-size:93%;
 40       line-height:normal;
 41       }
 42     .tabs ul {
 43     margin:0;
 44     padding:10px 10px 0 50px;
 45     list-style:none;
 46       }
 47     .tabs li {
 48     display:inline;
 49     margin:0;
 50     padding:0;
 51     cursor: pointer;
 52       }
 53     .tabs a {
 54       float:left;
 55       background:url("http://bbs.blueidea.com/attachments/2007/5/26/20070526_e5709086236b6748bd44RHeT4cMaUlhU.gif") no-repeat left top;
 56       margin:0;
 57       padding:0 0 0 4px;
 58       text-decoration:none;
 59       }
 60     .tabs a span {
 61       float:left;
 62       display:block;
 63       background:url("http://bbs.blueidea.com/attachments/2007/5/26/20070526_d21a8820e716ac79627fcBJbOC8dQGfU.gif") no-repeat right top;
 64       padding:5px 15px 4px 6px;
 65       color:#666;
 66       }
 67     .tabs a span {float:none;}
 68     .tabs a:hover span {
 69       color:#FF9834;
 70       }
 71     .tabs a:hover {
 72       background-position:0% -42px;
 73       }
 74     .tabs a:hover span {
 75       background-position:100% -42px;
 76       }
 77 -->
 78 </style>
 79 <script type="text/javascript" language="javascript">
 80 <!--
 81 function g(o){return document.getElementById(o);}
 82 function HoverLi(n)
 83 {
 84     for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
 85     g('tbc_0'+n).className='dis';g('tb_'+n);
 86 }
 87 //-->
 88 </script>
 89 </head>
 90 <body>
 91 <div class="w936">
 92     <div id="tb_" class="tb_ tabs">
 93             <ul>
 94                 <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a></li>
 95                 <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li>
 96                 <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li>
 97                 <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li>
 98                 <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li>
 99                 <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li>
100                 <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li>
101                 <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li>
102             </ul>
103     </div>
104     <div class="ctt">
105         <div class="dis" id="tbc_01">内容1</div>
106         <div class="undis" id="tbc_02">内容2</div>
107         <div class="undis" id="tbc_03">内容3</div>
108         <div class="undis" id="tbc_04">内容4</div>
109         <div class="undis" id="tbc_05">内容5</div>
110         <div class="undis" id="tbc_06">内容6</div>
111         <div class="undis" id="tbc_07">内容7</div>
112         <div class="undis" id="tbc_08">内容8</div>
113     </div>
114 </div>
115 <div class="w936">
116     <div id="tb_" class="tb_  tabs">
117             <ul>
118                 <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li>
119                 <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li>
120                 <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li>
121                 <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li>
122                 <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li>
123                 <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li>
124                 <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li>
125                 <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li>
126             </ul>
127     </div>
128     <div class="ctt">
129         <div class="dis" id="tbc_09">内容9</div>
130         <div class="undis" id="tbc_010">内容10</div>
131         <div class="undis" id="tbc_011">内容11</div>
132         <div class="undis" id="tbc_012">内容12</div>
133         <div class="undis" id="tbc_013">内容13</div>
134         <div class="undis" id="tbc_014">内容14</div>
135         <div class="undis" id="tbc_015">内容15</div>
136         <div class="undis" id="tbc_016">内容16</div>
137     </div>
138 </div>
139 <div class="w936">
140     <div id="tb_" class="tb_  tabs">
141             <ul>
142                 <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li>
143                 <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li>
144                 <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li>
145                 <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li>
146                 <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li>
147                 <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li>
148                 <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li>
149                 <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li>
150             </ul>
151     </div>
152     <div class="ctt">
153         <div class="dis" id="tbc_017">内容17</div>
154         <div class="undis" id="tbc_018">内容18</div>
155         <div class="undis" id="tbc_019">内容19</div>
156         <div class="undis" id="tbc_020">内容20</div>
157         <div class="undis" id="tbc_021">内容21</div>
158         <div class="undis" id="tbc_022">内容22</div>
159         <div class="undis" id="tbc_023">内容23</div>
160         <div class="undis" id="tbc_024">内容24</div>
161     </div>
162 </div>
163 </body>
164 </html>
posted on 2007-08-24 15:39  ie421  阅读(567)  评论(0)  编辑  收藏  举报