js实现的动画导航菜单效果代码
更新时间：2015年09月10日 09:19:33 作者：企鹅
这篇文章主要介绍了js实现的动画导航菜单效果代码,涉及JavaScript通过鼠标事件控制页面元素样式动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了javascript事件环 微任务和宏任务队列原理，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
一个无限级XML绑定跨框架菜单（For IE）...2007-01-01
客户端的js验证想必大家早已熟悉，今天本文带着大家再回忆一下，主要是在提交表单之前执行func方法，感兴趣的你可以参考下哈，希望可以帮助到你2013-03-03
这篇文章主要介绍了JS点击动态添加标签、删除指定标签的代码，在文中给大家补充介绍了js 更加轮播图图片张数动态生成小圆点的方法，需要的朋友参考下实现代码2018-04-04
js中的referrer想必大家并不陌生吧，在本文将为大家详细介绍其是如何使用的，感兴趣的朋友可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要介绍了JavaScript函数的特性与应用实践,结合实例形式较为深入的分析了javascript函数相关概念、特性、用法及操作注意事项,需要的朋友可以参考下2018-12-12
本文是小编基于js实现的520表白代码，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要为大家详细介绍了bootstrap手风琴的制作方法，制作声明式触发手风琴，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
BigInt是ES2020中引入的新的原始数据类型。它允许程序员使用更大的整数值，以匹配需要处理的数据集。在这篇博客中，我们将探讨BigInt的用法和它与其他相似方法的区别，感兴趣的可以了解一下2023-04-04
这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下2020-05-05
最新评论