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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
Laravel 框架返回状态拦截代码
2019/10/18 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
javascript 缓冲运动框架的实现
2017/09/29 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现统计代码行的方法分析
2017/07/12 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python中的元组介绍
2019/01/28 Python
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
应届生骨科医生求职信
2013/10/31 职场文书
校本教研工作方案
2014/01/14 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
redis 解决库存并发问题实现数量控制
2022/04/08 Redis