JS CSS实现仿雅虎另类滑动门切换效果

本文实例讲述了JS CSS实现仿雅虎另类滑动门切换效果。分享给大家供大家参考。具体如下：

这是仿照雅虎特色服务的一个标签滑动切换效果，核心是一个半铸钢钢性铸铁(铸造半钢)滑动门，经过了改进，有点特别，看下效果吧，估计很多朋友会喜欢的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-f-yahoo-hdm-menu-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题仿雅虎另类半铸钢钢性铸铁(铸造半钢)滑动门切换/titlestyle type='text/css '！-* { margin :0；padding:0 } div、dl、dt、DD { display : in-block；}div、dl、dt、DD { display : block } H2 { font : 800 12px/20px '宋体；} #制表符{ border:1px实心# cccmargin:40px宽度width :382 xpadd :4 px 0 } # tab div { padd :69 px 4px 0px；位置：相对；} #制表符dt { text-align : centerfont: 12px/60px '宋体；} #选项卡dd { font: 12px/20px '宋体；padd :10 px } # tab 1 dt { left : 4 pxtop : 4 px } # tab 2 dt { left :130 px；top :4 px } # tab 3 dt { left :256 px；top :4 px } # tab 4 dt { left : 4px；top : 4px } # tab 5 dt { left :130 px；top :4 px } # tab 6 dt { left :256 px；top:4px } .关闭dt { height:60px宽度宽度：120像素背景# FAFAFA位置：绝对；border:1px实心#ccc } .关闭dd { display:none } .打开dt { height:65px宽度宽度：120 pxbackground : # EBEBEB位置：绝对；border:1px固体# cccborder-底部：无；}.打开DD { background : # ebebebborder :1 px固体# ccc}-/style脚本类型=' text/JavaScript '窗口。onload=function(){ all tab=document。getelementbyid(' tab ').getElementsByTagName('dl ')为(I=0；所有标签.关闭所有选项卡[i].onmouseover=function(){ for(j=0；j all tab . length j){ all tab[j].class NAmE=' close ' }这个。class NAmE=' open ' } } }/script/head dydiv id=' tab ' H2欢迎来到我们/h2 div dl id='tab1' dt今日更新/dt dd1、今日更新的内容/dd /dl dl id='tab2' dt今日排行/dt dd2、今日排行的内容/dd /dl dl id='tab3' dt今日推荐/dt dd3、今日推荐的内容/DD/dl/div/dl id=' tab 4 ' dt最近下载/dt dd4、最近下载的东西/dd /dl dl id='tab5' dt脚本代码/dt dd5、脚本代码的内容/dd /dl dl id='tab6' dt网页特效/dt dd6、精品网页特效的内容/dd /dl /div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。