仿网易的滑动门技术

<style>
body { font: normal 12px "宋体", Arial; margin:0; padding:0; background:#0071B5; color:#333;}
div,form,img,ul { margin: 0; padding: 0; border: 0;}
li{ list-style:none;}
table,td,tr,th{ font-size:12px;}
a:link {color: #049;text-decoration:none;line-height: 18px;}
a:visited { color: #800080;text-decoration:none;}
a:hover { color: #049; text-decoration:underline;}
a:active { color: #049;}
td.focusTag{ background:url(http://img.qihoo.com/images/msnsq/today_bottom_btn.jpg) no-repeat; color:#fff; width:60px; padding-top:3px; text-align:center; cursor:pointer; }
td.focusTag1{ color:#333; width:60px; padding-top:3px; text-align:center; cursor:pointer; }
.bgblue{ background:#EAF3FD; border:1px solid #95C2EE; line-height:26px;}
.jkbg,.jkbg_1,.jkbg1,.jkbg1_1,.jkbg2,.jkbg2_1{ cursor:pointer; padding-left:10px; height:24px;}
.jkbg{ background:url(http://img.qihoo.com/images/msnsq/guest_tab01.jpg) bottom no-repeat;}
.jkbg_1{ background:url(http://img.qihoo.com/images/msnsq/guest_untab01.jpg) bottom no-repeat;}
.jkbg1{ background:url(http://img.qihoo.com/images/msnsq/guest_tab02.jpg) bottom no-repeat;}
.jkbg1_1{ background:url(http://img.qihoo.com/images/msnsq/guest_untab02.jpg) bottom no-repeat;}
.jkbg2{ background:url(http://img.qihoo.com/images/msnsq/guest_tab03.jpg) bottom no-repeat;}
.jkbg2_1{ background:url(http://img.qihoo.com/images/msnsq/guest_untab03.jpg) bottom no-repeat;}
</style>
<script language="JavaScript" type="text/javascript">
     function GetObj(objName){
       if(document.getElementById){
         return eval('document.getElementById("' + objName + '")');
       }else if(document.layers){
         return eval("document.layers['" + objName +"']");
       }else{
         return eval('document.all.' + objName);
       }
     }
     function mp_jk(ids)
                      {
                 var Selected = new Array(4)
                          Selected[0] = "";
                          Selected[1] = "jkbg";
                          Selected[2] = "jkbg1";
                          Selected[3] = "jkbg2";

                          var unSelected = new Array(4)
                          unSelected[0] = "";
                          unSelected[1] = "jkbg_1";
                          unSelected[2] = "jkbg1_1";
                          unSelected[3] = "jkbg2_1";
 
                  for(var i=1;i<=3;i++)
                  {
             if(ids == i)
             {
       GetObj("jk_h_"+ids).className = Selected[ids];
       GetObj("jk_b_"+ids).style.display = "";   
             }
              else
             {
       GetObj("jk_h_"+i).className = unSelected[i];
       GetObj("jk_b_"+i).style.display = "none";
             }
                   }
                       }
</script>
<table width="242" border="0" align="center"   cellspacing="0" cellpadding="0" class="borline" style="border-top:none;">

<tr>
<td   bgcolor="#ffffff" valign="top">
<table width="100%"   border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="jkbg" id="jk_h_1" οnmοuseοver="mp_jk(1);">精彩幻灯</td>
<td class="jkbg1_1" id="jk_h_2" οnmοuseοver="mp_jk(2);"><a class="cBlue">图片故事</a></td>
<td class="jkbg2_1" id="jk_h_3" οnmοuseοver="mp_jk(3);"><a class="cBlue">热点话题</a></td>
</tr>
</table></td>
</tr>
<tr>
<td class="pd5"   bgcolor="#ffffff">
<div id="jk_b_1" style="display:;padding:5px 0 4px; ">
<table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0" >

<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247020,5d3d94,m1226_6075,1.html">[养眼]抓拍最全的明星街头秀！</a></td>
</tr>
<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247666,01c829,m1226_6075,1.html">[可惜]盘点分手的圈内明星情侣</a></td>
</tr>
<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247664,5576e0,m1226_6075,1.html">[可怜]演技绝佳但没红过的艺人</a></td>
</tr>
<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247581,63981f,m1226_6075,1.html">[无语]海边拍摄到的“露女”们</a></td>
</tr>
<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247586,29f6a7,m1226_6075,1.html">[不屑]瞧瞧这群日本女兵能干啥</a></td>
</tr>
<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247485,c6d40a,m1226_6075,1.html">[揭秘]性格不同女星命运大不同</a></td>
</tr>
<tr>
<td align="left">
·<a target="_blank" href="http://msn.qihoo.com/magic/m247494,d8c9fc,m1226_6075,1.html">[香艳]靠走光吃饭的10大体坛女</a></td>
</tr>

 

</table>
</div>
<div id="jk_b_2" style="display:none;">
   <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="149" >
                     <tbody>
<tr>
<td width="87"   align="center" valign="middle"><a     id="utitle_248326" target="_blank" href="http://msn.qihoo.com/magic/m248326,2b0aec,m1226_6078,1.html"><img src="http://mimg.qihoo.com/qhimg/msn_img/78_58/0/846/405/96d27d.jpg" width="78" height="58" border="0"   class="pimg3"></a></td>
<td   valign="middle" ><strong><a     id="utitle_248326" target="_blank" href="http://msn.qihoo.com/magic/m248326,2b0aec,m1226_6078,1.html">大学生为就业烧香许愿</a></strong><br />
眼下正是大学毕业生求职的关键期。由于就业..
</td></tr><tr>
<td width="87"   align="center" valign="middle"><a     id="utitle_248331" target="_blank" href="http://msn.qihoo.com/magic/m248331,24e309,m1226_6078,1.html"><img src="http://mimg.qihoo.com/qhimg/msn_img/78_58/0/846/455/796ba4.jpg" width="78" height="58" border="0"   class="pimg3"></a></td>
<td   valign="middle" ><strong><a     id="utitle_248331" target="_blank" href="http://msn.qihoo.com/magic/m248331,24e309,m1226_6078,1.html">大学生参加鸟人大赛</a></strong><br />
河南首届“鸟人”大赛在郑大西亚斯学院上演..
</td></tr>
         
         
</tbody>
           </table>
</div>
<div id="jk_b_3" style="display: none; padding-bottom:9px">
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0"   class="mgt6 picList">
                      <tr>
<td colspan="2" style="text-align:center; line-height:31px;"><a target="_blank" href="http://msn.qihoo.com/article/m248312,0af5ec,m1226_6076.html">韩寒：中华民族素质已濒临劣等</a></td>
                             </tr>
             <tr>
<td><a     id="utitle_248313" target="_blank" href="http://msn.qihoo.com/magic/m248313,2655c5,m1226_6079,1.html"><img src="http://mimg.qihoo.com/qhimg/msn_img/100_75/0/846/278/295f46.jpg" width="100" height="75" border="0"   ></a><br /><a     id="utitle_248313" target="_blank" href="http://msn.qihoo.com/magic/m248313,2655c5,m1226_6079,1.html">湖南大学生的素质</a></td>
<td><a     id="utitle_248316" target="_blank" href="http://msn.qihoo.com/magic/m248316,f27462,m1226_6079,1.html"><img src="http://mimg.qihoo.com/qhimg/msn_img/100_75/0/846/286/d42dc5.jpg" width="100" height="75" border="0"   ></a><br /><a     id="utitle_248316" target="_blank" href="http://msn.qihoo.com/magic/m248316,f27462,m1226_6079,1.html">中国国民的素质</a></td>

                       </tr>
                    
                     </table> 
</div></td>
</tr>
</table>