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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
JavaScript中的继承方式详解
2015/02/11 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Android面试宝典
2013/08/06 面试题
旷课检讨书3000字
2014/02/04 职场文书
材料物理专业求职信
2014/09/01 职场文书
家装业务员岗位职责
2015/04/03 职场文书
小王子读书笔记
2015/06/29 职场文书
运动会运动员赞词
2015/07/22 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Python异常类型以及处理方法汇总
2021/06/05 Python
python unittest单元测试的步骤分析
2021/08/02 Python
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers