jQuery实现鼠标悬停背景翻转的黑色导航菜单代码


Posted in Javascript onSeptember 14, 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>
<title>导航菜单-鼠标悬停背景翻转的黑色jQuery菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.menu{height:41px;display:block;width:662px;}
.menu ul{list-style:none;padding:0;margin:0;}
.menu ul li{float:left;overflow:hidden;position:relative;text-align:center;height:38px;line-height:31px;*line-height:33px;background:url("images/tmenubg.png") repeat-x;}
.menu ul li a{position:relative;display:block;width:81px;height:31px;font-family:"Microsoft Yahei";font-size:12px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;}
.menu ul li a span{position:absolute;left:0;width:81px;}
.menu ul li a span.out{top:0px;}
.menu ul li a span.over,.menu ul li a span.bg{top:-45px;}
#menu{position:absolute;margin:4px 0px 0px 295px;*margin:4px 0px 0px -185px;}
#menu ul li a{color:#fff;text-decoration:none;}
#menu ul li a span.over{color:#000;text-decoration:none;}
#menu ul li span.bg{height:32px;background:url("images/overbg.png") center center no-repeat;}
#menu .fl{background:url("images/lrbg.png") no-repeat;width:7px;height:38px;float:left;}
#menu .fr{background:url("images/lrbg.png") no-repeat -8px 0px;width:7px;height:38px;float:right;}
</style>
<script src="jquery1.3.2.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
 $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
 $("#menu li a").each(function() {
  $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
 });
 $("#menu li a").hover(function() {
  $(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
  $(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
  $(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show
 }, function() {
  $(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
  $(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
  $(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide
 });
 $("#menu2 li a").wrapInner( '<span class="out"></span>' );
 $("#menu2 li a").each(function() {
  $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
 });
 $("#menu2 li a").hover(function() {
  $(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
  $(".over", this).stop().animate({'top': '0px'}, 200); // move down - show
 }, function() {
  $(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
  $(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
 });
});
</script>
</head>
<body>
<div class="clear"></div>
<div id="content">
 <div id="top">
 <div id="menu" class="menu">
 <div class="fl"></div>
 <div class="fr"></div>
 <ul>
 <li><a href="#">三水点靠木</a></li>
 <li><a href="#">产品介绍</a></li>
 <li><a href="#">软件下载</a></li>
 <li><a href="#">商业授权</a></li>
 <li><a href="#">模板市场</a></li>
 <li><a href="#">脚本下载</a></li>
 <li><a href="#">交流论坛</a></li>
 <li><a href="#">脚本交流</a></li>
 </ul>
 </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 #Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 #Javascript
You might like
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Sanic框架流式传输操作示例
2018/07/18 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python yield关键词案例测试
2019/10/15 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
一些.net面试题
2014/10/06 面试题
读书心得体会
2013/12/28 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
申论倡议书范文
2014/05/13 职场文书
中职生自荐信范文
2014/06/15 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android