仿网易的滑动门技术

原创 2007年09月30日 14:51:00

<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" onmouseover="mp_jk(1);">精彩幻灯</td>
<td class="jkbg1_1" id="jk_h_2" onmouseover="mp_jk(2);"><a class="cBlue">图片故事</a></td>
<td class="jkbg2_1" id="jk_h_3" onmouseover="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>
 
 

相关文章推荐

仿网易的滑动门技术DIV+CSS实现

  • 2010年06月11日 10:52
  • 1KB
  • 下载

仿网易滑动门TAB导航菜单.htm

  • 2009年01月18日 01:42
  • 5KB
  • 下载

css滑动门技术

双重滑动门效果还是比较常用的,其实很好理解: 两个门就好比两个块级的元素重合所形成的效果,看一段代码如下: #Mydoor ul li a:hover{ color:#fff; ...

仿网易div+css滑动门选项卡效果

  • 2010年05月29日 11:39
  • 4KB
  • 下载

网易 雅虎 滑动门 效果

  • 2010年02月26日 09:37
  • 81KB
  • 下载

AndroidRecyclerView仿QQ滑动门菜单右滑菜单

Android开发中HorizontalScrollView即可实现横向水平滑动,若想实现左滑弹出菜单,右滑隐藏菜单需要修改HorizontalScrollView默认滑动事件。假设菜单长度为100像...

网易滑动门TAB导航菜单

  • 2010年02月03日 09:39
  • 1KB
  • 下载

网易滑动门TAB导航菜单

  • 2010年02月08日 10:17
  • 10KB
  • 下载

代码经过精简后的仿QQ折叠菜单-滑动门选项卡

效果如下图所示: HTML code: SlideView 滑动展示效果 .sv3 dl, .sv3 dt, .sv3 dd{ padding:0; marg...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿网易的滑动门技术
举报原因:
原因补充:

(最多只允许输入30个字)