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


Posted in Javascript onSeptember 10, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

<!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 相关文章推荐
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 #Javascript
JS实现自动变换的菜单效果代码
Sep 09 #Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 #Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
php常用hash加密函数
2014/11/22 PHP
PHP递归创建多级目录
2015/11/05 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python continue语句用法实例
2014/03/11 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python中的推导式使用详解
2015/06/03 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python判断正负数方式
2020/06/03 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
详解python内置模块urllib
2020/09/09 Python
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
旷课检讨书1000字
2014/02/14 职场文书
住宅质量保证书
2014/04/29 职场文书
个人综合鉴定材料
2014/05/23 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
介绍信格式样本
2015/05/05 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL