jQuery实现两款有动画功能的导航菜单代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下:

这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了。

运行效果截图如下:

jQuery实现两款有动画功能的导航菜单代码

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个有动画功能的导航菜单</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function()
{
 $("#test1 a").mouseover(function()
 { 
  var index = $("#test1 a").index(this);
  var width = $("#test1 a").width();
  $("#test1 .showhover").stop().animate({left:width*index},1000);
 })
 $("#test2 a").mouseover(function()
 { 
  var index = $("#test2 a").index(this);
  var width = $("#test2 a").width();
  $("#test2 .showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
 })
})
</script> 
<style type="text/css">
.body {margin:10px;}
img {border:0;}
a {text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
.menu {background:#003399; height:25px; width:600px; position:relative; overflow:hidden;}
.menu .showmenu, .menu .showhover{ position:absolute;}
.menu .showmenu a {float:left; display:block;}
.menu .showmenu a {font:700 12px/25px Microsoft YaHei; color:#fff; width:100px; height:25px; text-align:center;}
.menu .showhover {background:#990033; width:100px; height:25px;}
</style>
</head>
<body>
<div class="menu" id="test1">
 <div class="showhover"></div>
 <div class="showmenu">
  <a href="#">网站首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻中心</a>
  <a href="#">产品中心</a>
  <a href="#">解决方案</a>
  <a href="#">联系我们</a>
 </div>
</div>
<div style="clear:both;height:50px;"></div>
<div class="menu" id="test2">
 <div class="showhover"></div>
 <div class="showmenu">
  <a href="#">网站首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻中心</a>
  <a href="#">产品中心</a>
  <a href="#">解决方案</a>
  <a href="#">联系我们</a>
 </div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js对象关系图 方便dom操作
Mar 18 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 #Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 #Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 #Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 #Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 #Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Django 反向生成url实例详解
2019/07/30 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
租房协议书怎么写
2014/04/10 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python