德艺博客关注设计,提升认知、升级思维和记录生活的博客。

学习网易首页栏目滑门技术标签

今天在网易看到栏目滑动门效果,其实很早就看到了不少网站有这样的效果,不知道怎么搞的,今天在网上学习了一下,呵呵,把这段代码做下来供参考,我的网站:www.oneun.cn首页也有那样的效果,可以去看看....


<SCRIPT language=JavaScript>
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
  TabTitle[tID].className='menu_title';
  TabTitle[ID].className='menu_title_on';
  Tabs[tID].style.display='none';
  Tabs[ID].style.display='';
  tID=ID;
}
}
</SCRIPT>
  <table width="100%" border=1>
    <tr align=middle>
      <td class=menu_title_on id=TabTitle onmouseover=ShowTabs(0)>QQ学院</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(1)>QQ空间</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(2)>雅虎NCP</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(3)>博客DIY</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(4)>网商学院</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(5)>推广学院</td>
    </tr>
  </table>
  <table width="100%" align=center border=1>
    <tr id=Tabs>
      <td vAlign=top height=100>QQ学院</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>QQ空间</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>雅虎NCP</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>博客DIY</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=50>网商学院</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>推广学院</td>
    </tr>
  </table>

如果想用点击的方式达到同样效果,只需将上面代码中的红色“onmouseover”改成"onclick"即可

2008年3月6日 | 发布:zoudecao

发表留言:

相关推荐:

  • 我为什么不推荐找网络公司建站
  • 教你打造自动识别PC端与移动端的响应式网站
  • 长滚动网页设计的四个技巧
  • 网页挂马详细步骤教程
  • 优秀的个人网站设计欣赏
  • 始终在网页顶部的导航条,仿天涯顶部固定层菜单
  • CSS下拉菜单代码2
  • CSS下拉菜单代码1
  • CSS透明导航菜单代码
  • SiteWeaver6.8后台编辑器支持IE9/IE10/IE11浏览器的方法
  • 网页设计最常见可用性错误?
  • SiteWeaver如何调整友情链接logo尺寸的方法
  • 邹公:百度628地震 你的站真被K了吗?
  • 分享25个圆形元素在网页设计中的应用案例
  • 邹公:以网站建设为生的站长在新的一年该怎样生存?