鼠标滑动选项卡多点调用特效果
<!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 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 id="tbc_01">内容1</div> <div id="tbc_02">内容2</div> <div id="tbc_03">内容3</div> <div id="tbc_04">内容4</div> <div id="tbc_05">内容5</div> <div id="tbc_06">内容6</div> <div id="tbc_07">内容7</div> <div id="tbc_08">内容8</div></div></div><div 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 id="tbc_09">内容9</div> <div id="tbc_010">内容10</div> <div id="tbc_011">内容11</div> <div id="tbc_012">内容12</div> <div id="tbc_013">内容13</div> <div id="tbc_014">内容14</div> <div id="tbc_015">内容15</div> <div id="tbc_016">内容16</div></div></div><div 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 id="tbc_017">内容17</div> <div id="tbc_018">内容18</div> <div id="tbc_019">内容19</div> <div id="tbc_020">内容20</div> <div id="tbc_021">内容21</div> <div id="tbc_022">内容22</div> <div id="tbc_023">内容23</div> <div id="tbc_024">内容24</div></div></div></body></html>