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 相关文章推荐
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
vue实现单选和多选功能
Aug 11 Javascript
switchery按钮的使用方法
Dec 18 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python的exec、eval使用分析
2017/12/11 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python yield关键词案例测试
2019/10/15 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python unittest框架操作实例解析
2020/04/13 Python
营业员个人总结的自我评价
2013/10/25 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
Java实现注册登录跳转
2022/06/16 Java/Android