本文实例讲述了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/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画导航菜单</title> <style 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; padding:0;} body { font:12px "\5B8B\4F53",san-serif; color:#808080; padding-top:6px; } a { text-decoration:none; color:#808080 } a:hover { text-decoration:underline; color:#ba2636 } ul,li { list-style:none; } #nav{ padding:41px 0 0 0; height:27px;width:542px; overflow:hidden; float:right; margin-right:17px;position:relative ;} #nav ul{ height:27px; width:100%; background: url(i/naVbotBdr.gif) repeat-x 0 100%; } #nav ul li{ width:67px; height:24px; float:left; padding-right:28px; display:inline; cursor:pointer; overflow:hidden} #nav a{background:#999;width:100%; height:24px; display:block; float:left; outline:none; color:#fff; line-height:24px; text-align:center; font-size:16px; font-weight:bold; overflow:hidden} #navCur{ position:absolute; left:0; bottom:0; height:3px; color:#F00; width:67px; margin:0; padding:0; display: block; float:none; background:#FF0000; cursor:pointer; overflow:hidden} </style> </head> <body> <div id="nav"> <ul class="cf"> <li><a href="" hidefocus="true">1</a></li> <li><a href="1" hidefocus="true">2</a></li> <li class="cur"><a href="2" hidefocus="true">3</a></li> <li><a href="3" hidefocus="true">4</a></li> <li><a href="4" hidefocus="true">5</a></li> <li><a href="5" hidefocus="true">6</a></li> </ul> <span id="navCur"></span> </div> <script type="text/javascript"> (function(){ var curPostion,thisLeft,curPostion_1; var obj = getId('nav').getElementsByTagName('ul')[0],timer = null,navCur = getId('navCur'),x,liArr = getId('nav').getElementsByTagName('li'),liLength = liArr.length-1; for (var x=0;x<liArr.length; x++ ){ liArr[liLength].style.paddingRight = "0"; var li = liArr[x],curPostion = navCur.offsetLeft; if(li.className == "cur"){ navCur.style.left = li.offsetLeft + "px"; } li.onmouSEOver=function(){ clearTimeout(timer); thisLeft = this.offsetLeft; if (thisLeft > navCur.offsetLeft) { hover(); } else { curPostion_1 = this.offsetLeft; out(); } }; li.onmouSEOut=function(){ clearTimeout(timer); if (curPostion < navCur.offsetLeft) { curPostion_1 = curPostion; out(); } else { thisLeft = curPostion; hover(); } }; } function hover(){ if (navCur.offsetLeft <= thisLeft) { var a = Math.max(parseInt((thisLeft - navCur.offsetLeft) / 15),3); navCur.style.left = navCur.offsetLeft + a + "px"; timer = setTimeout(arguments.callee,5); } else { navCur.style.left = thisLeft + "px"; clearTimeout(timer); } } function out(){ if (navCur.offsetLeft >= curPostion_1) { var a = Math.max(parseInt((navCur.offsetLeft - curPostion_1) / 15),3); navCur.style.left = navCur.offsetLeft - a + "px"; timer = setTimeout(arguments.callee,5); } else { navCur.style.left = curPostion_1 + "px"; clearTimeout(timer); } } function getId(id){ return document.getElementById(id) } })(); </script> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。