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的复制网页内容到WORD的实现代码
Feb 16 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
JS提交form表单实例分析
Dec 10 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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遍历数组的方法分享
2012/03/22 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP之header函数详解
2021/03/02 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
基于python的字节编译详解
2017/09/20 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python生成任意频率正弦波方式
2020/02/25 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
python实现与redis交互操作详解
2020/04/21 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
九年级历史教学反思
2014/01/27 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
公司委托书怎么写
2014/08/02 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
Python必备技巧之函数的使用详解
2022/04/04 Python