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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
Array.filter中如何正确使用Async
Nov 04 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学习之PHP运算符
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP安全防范技巧分享
2011/11/03 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
ThinkPHP模型详解
2015/07/27 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
node文件批量重命名的方法示例
2017/10/23 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
django定期执行任务(实例讲解)
2017/11/03 Python
python如何从文件读取数据及解析
2019/09/19 Python
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
求职信格式要求
2014/05/23 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
赞助商致辞
2015/07/30 职场文书
初三语文教学反思
2016/03/03 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL