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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
vue如何进行动画的封装
Sep 26 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
js实现飞机大战小游戏
2020/08/26 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python机器学习库常用汇总
2017/11/15 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
详解python如何引用包package
2020/06/07 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
网络编辑岗位职责范本
2014/02/10 职场文书
公司运动会策划方案
2014/05/25 职场文书
宣传活动总结范文
2014/07/01 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang