JS实现漂亮的淡蓝色滑动门效果代码

本文实例讲述了射流研究…实现漂亮的淡蓝色滑动门效果。分享给大家供大家参考。具体如下：

这款漂亮淡蓝色滑动门代码，感觉很不错哦。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/

具体代码如下：

！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 ' head runat=' server ' title漂亮淡蓝色滑动门代码/title style type=' text/CSS ' body { font-size :12 px；} .普通{ list-style:无；向左浮动：padding: 5px 2px 2px 2px宽度： 90px文本对齐：居中；垂直对齐：middle光标：指针；边框-底部：实心1px # 9cd 9 F5右边框：固体1px # 9cd 9 F5背景-color : # dee7f 5；边界崩溃：分离；} .所选{列表式：无；向左浮动：padding: 5px 2px 2px 2px宽度： 90px文本对齐：居中；垂直对齐：middle光标：指针；边框-底部：固态0px # 9cd 9 F5右边框：固体1px # 9cd 9 F5背景-颜色： # f8f8} # divMainTab {边框-左侧：固体1px # 9cd 9 F5边框-顶部：实心1px # 9cd 9 F5float : leftmargin : 0pxpadding : 0px } .divContent { width: 474px高度： 400像素；clear:两者；边框-底部：实心1px # 9cd 9 F5边框-左侧：实心1px # 9cd 9 F5右边框：实心1px # 9cd 9 F5} a { text-decoration : nonecolor: # 00ccff} a :悬停{ text-decoration :下划线；color : # cc 0000 }/样式脚本语言=' JavaScript '类型=' text/JavaScript '函数更改标签(索引){ for(var I=1；I=5；I){文档。getelementbyid(' Li _ ' I)).' normal document . getelementbyid(' Li _ '索引)。选择文档。getelementbyid(' div ' I)。风格。显示='无'；} document.getElementById ('div1 ').innerText='www.jb51.net '索引；文件。getelementbyid(' div '索引)。风格。display=' block}/script/head body form id=' form 1 ' runat=' server ' div div id=' div maintaib ' ul style=' list-style : none；余量： 0pxpadding: 0px边界崩溃：崩溃；Li id=' Li _ 1 ' class=' selected ' on mouse over=' ChangeTab(' 1 ')' a href=' # '最新更新/a/Li Li id=' Li _ 2 ' class=' normal ' on mouse over=' ChangeTab(' 2 ')' a href=' # '阅读排行/a/Li Li id=' Li _ 3 ' class=' normal ' on mouse over=' change tab(' 3 ')' a href=' # '本月排行/a/Li Li id=' Li _ 4 ' class=' normal ' on mouse over=' ChangeTab(' 4 ')' a href=' # '本日排行/a/Li Li id=' Li _ 5 ' class=' normal ' on mouse over=' change tab(' 5 ')' a href=' # '我们/a/Li/ul/div div id=' div 1 ' style=' display : block ' class=' div content ' 1号/div div id=' div 2 ' style=' display : none ' class=' div content ' 2号/div div id=' div 3 ' style=' display : none ' class=' div content ' 3号/div div id=' div 4 ' style=' display : none ' class=' div内容' 4号/div div id=' div 5 ' style=' display : none ' class=' div content ' 5号/div/表单/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。