JS实现弹性菜单效果代码

本文实例讲述了射流研究…实现弹性菜单效果代码。分享给大家供大家参考。具体如下：

这是一款JavaScript CSS实现弹性菜单——纯属自己写着练习，无使用第三方的类库，我觉得是值得学习前端设计的朋友参考的，有兴趣的朋友可以把弹性的菜单背景换成一个漂亮的图片，这样更漂亮了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-tx-move-menu-style-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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleJs实现菜单弹性菜单/titlestyle type='text/css'body，ul，ol，dl，dt，dd，h1，h2，h3，h4，h5，p，form { padd : 0；保证金： 0；}李{列表式：无；} img {边框： 0；} body { font-family : Arial背景： # fff URL()-repeat-x；} #标题{ width: 960px高度： 107像素；margin: 0 auto 12px相对位置：} # header h1 { padding-top : 15px；向左浮动：} #标题ul { height: 44px绝对位置：右： 0；底部： 0；} #标题。正常，#表头。活动{左侧浮动：宽度： 88px高度： 44px相对位置：z-index : 1；} #标题。普通一、#表头。活动向左浮动：宽度： 88px高度： 44px线高： 44px文本对齐：中心；文本装饰：无；font-size : 14px字体粗细：粗体；} #标题。激活a { color: # fff} #标题。普通a { color : # 999 } # BTN _ BG { width : 88px x8 : 44px背景： # FB 2347 URL()；绝对位置：飞越：隐藏；left : 608 px bottom : 0；z-index : 2；} # BTN _ BG ul { width : 528 pxleft :-176 px；位置：绝对；}/style脚本类型=' text/JavaScript ' var away；窗户。onload=function(){ var odiv=document。getelementbyid(' BTN _ BG ')；var oul=odiv。getelementsbytagname(' ul ')[0]；var oli=文档。getelementbyid(' header ').getElementsByTagName('ul')[0].getElementsByTagName(' Li ')；var I=0；for(I=0；长度；奥利。索引=我；奥利[我]。onmouseover=function(){ away=432 88 * this。指数；menui interval()；};};} var计时器=null函数menui interval(){ if(timer){ clearInterval(timer)；} timer=setInterval(menuMove，30)；} var step=0；var l=0；函数menuMove(){ var odiv=document。getelementbyid(' BTN _ BG ')；var oul=odiv。getelementsbytagname(' ul ')[0]；step=(away-odiv。offset left)/10；步长=步长* 0.78;l=parsent(odiv。偏移步骤);奥迪夫。风格。left=l ' px乌尔。风格。left=-l 432 ' px '；}/script/head dydiv id=' header ' ul Li class=' normal ' a href=' # '首页/a/li li class='normal'a href='# '叶子课程/a/li li class='normal'a href='# '叶子资源/a/li li class='normal'a href='# '留言/a/li li class='normal'a href='# '叶子博客/a/li li class='normal'a href='# '联系叶子/a/Li/ul div id=' BG ' ul Li class=' active ' a href=' # '首页/a/li li class='active'a href='# '叶子课程/a/li li class='active'a href='# '叶子资源/a/li li class='active'a href='# '留言/a/li li class='active'a href='# '叶子博客/a/li li class='active'a href='# '联系叶子/a/li /ul /div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。