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 tips提示框组件实现代码
Nov 19 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python 文件操作实现代码
2009/10/07 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Python 处理文件的几种方式
2019/08/23 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
测控技术自荐信
2014/06/05 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年业务工作总结
2014/11/17 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
确保工程质量承诺书
2015/04/29 职场文书
亮剑观后感
2015/06/05 职场文书
电工生产实习心得体会
2016/01/22 职场文书