js实现的动画导航菜单效果代码

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

这是一款简单的动画导航菜单效果，每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动，指明当前菜单的位置。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-animate-nav-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 '标题动画导航菜单/titlestyle type='text/css'body，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，code，form，fieldset，legend，input，button，textarea，p，blockquote { margin:0划水：0;}body { font:12px '\5B8B\4F53 '，San-serif；color : # 808080 padding-top :6 px；} a { text-decoration : none颜色： # 808080 } a :悬停{文本装饰：下划线；color:#ba2636 }ul，Li { list-style : none；} # nav { padding:41px 0 0 0高度：27 px宽度宽度：542px飞越：隐藏；右浮动：右边距：17 px位置：相对；} # nav ul { height:27px宽度：100%;后台： URL(I/NavBotdr。gif)重复-x 0 100%；} # nav ul Li { width :67 pxh three :24 pxfloat : left填充-右侧：28 pxdisplay:inlinecursor:pointer指针指针；溢出：隐藏} # nav a {背景： # 999；宽度：100%;高度：24px显示：块；float : leftoutline : none color : # fff线高：24 px文本对齐：居中；font-size :16 px字体粗细：加粗；溢出：隐藏} # NavCur {位置：绝对；左转：0底部：0;height:3pxcolor: # F00宽度：67 px余量：0划水：0;显示器：块；float:none背景#光标：指针指针；溢出：隐藏}/style/head body div id=' nav ' ul class=' cf ' lia href=' hide focus '=' true ' 1/a/Li lia href=' 1 '隐藏焦点=' true ' 2/a/Li Li class=' cur ' a href=' 2 '隐藏焦点=' true ' 3/a/Li lia href=' 3 '隐藏焦点=' true ' 4/a/Li lia href=' 4 '隐藏焦点=' true ' 5/a/Li lia href=' 5 'getElementsByTagName('ul')[0]，timer=null，navCur=getId('navCur ')，x，lier=getId(' nav ').getElementsByTagName('li ')，liLength=骗子。长度-1；for(var x=0；xliarr . length x){ lilar[Lilength]。风格。右填充=' 0 '；var Li=骗子[x]，curposition=NavCur . offsetLeftf(Li。类名=' cur '){ navcur。风格。左=李。offsetleft ' px}李。onmouseover=function(){ cleartime out(计时器);thisLeft=this.offsetLeftif(此左侧导航曲线。offset left){ hover()；} else { curposition _ 1=this。offsetleftout()；} };李。onmouseout=function(){ cleartime out(计时器);if(curposition nav cur。offset left){ cur position _ 1=cur position；out()；} else { this left=curpositionhover()；} };}函数悬停(){ if(nav cur。offsetleft=这个左边){ var a=math。max(parsent ((这个左导航曲线。offsetleft)/15)，3)；导航曲线。风格。左=导航曲线。offsetleft a ' pxtimer=setTimeout(参数。calleeper，5)；} else { nav cur。风格。left=这个左“px”；clearTimeout(计时器);} } function out(){ if(nav cur。offset left=cur position _ 1){ var a=math。max(parsent((nav cur。offsetleft-curposition _ 1)/15)，3)；导航曲线。风格。左=导航曲线。offset left-a ' px '；timer=setTimeout(参数。calleeper，5)；} else { nav cur。风格。left=curposition _ 1 ' pxclearTimeout(计时器);} }函数GetID(id){返回文档。GetElementByID(id)} })()；/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。