JS实现仿新浪黄色经典滑动门效果代码

本文实例讲述了射流研究…实现仿新浪黄色经典滑动门效果代码。分享给大家供大家参考。具体如下：

这是一款仿新浪网的滑动门，黄色经典，操作舒适度确实很舒服，不亏是门户哦，长度和宽度这个就要自己修改啦，布局紧凑合理，本人喜欢的风格。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-sina-jd-move-style-demo/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=gb2312'title新浪滑动门/title style type=' text/CSS ' * { font :12 px '宋体；余量：0划水：0;} ul { list-style :无；} a { text-decoration : none} a :悬停{文本装饰：下划线；}.TabADS { width:160px}。TabADS ul { width :160 pxh three :24 px背景# fff}。TabADS Li { width :40 pxfloat : leftheight :18 pxpadding :6 px 0 0 background : URL(images/Sina home _ ws _ 013。gif)不重复的权利# E4 E4；文本对齐：居中；颜色： # 333颜色：指针指针；}.TabADS .TasADSOn {后台： URL(图片/新浪首页_ ws _ 012。gif)不重复右# FFE 4a 6；文本对齐：居中；color : # 333 font-weight : bold；光标：指针指针；}.TabADSCon {后台： # FFD77Bpadding:5px宽度宽度：150px}。TabADSCon李{ text-align : left线高：20 px}/style/head dyscript language=' JavaScript ' type=' text/JavaScript '函数Show _ tabasedmenu(Taba did _ num，Taba dnum){ for(var I=0；i4；I){文档。getelementbyid(' Taba content _ ' Taba did _ num I .)。风格。显示='无'；} for(var I=0；i4；I){文档。getelementbyid(' tabad menu _ ' Taba did _ num I).className=}文档。getelementbyid(' tabad menu _ ' Taba did _ num Taba dnum).TasADSOndocument .getelementbyid(' tabad content _ ' Taba did _ num Taba dnum。).风格。display=' block}/script div class=' TabADS ' ulli id=' tabad menu _ 10 ' on mouse over=' setTimeout '(Show _ tabad menu(1，0)'，200)；class=' TasADSOn ' VB/Lili id=' tabad menu _ 11 ' on mouse over=' setTimeout '(Show _ tabad menu(1，1)'，200)；ASP/Lili id=' tabad menu _ 12 ' on mouse over=' setTimeout '(Show _ tabad menu(1，2)'，200)；PHP/Lili id=' tabad menu _ 13 ' on mouse over=' setTimeout '(Show _ tabad menu(1，3)'，200)；CGI/Li/ul/div class=' TabADSCon ' ul id=' tabadcontent _ 10 ' lia href=' # ' target=' _ blank '基于副主席的推箱子游戏/a/Li/ulul id=' tabadcontent _ 11 ' style=' display : none；lia href='#' target='_blank'VB批量更改文件名（重命名)程序/a/Li/ulul id=' tabadcontent _ 12 ' style=' display : none；lia href='#' target='_blank'VC五子棋游戏进阶版源码/a/Li/ulul id=' tabadcontent _ 13 ' style=' display : none；'lia href='#' target='_blank '精美多模式特尔斐（希腊古都)闹钟程序/a/li/ul/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。