jQuery实现响应鼠标背景变化的动态菜单效果代码


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码。分享给大家供大家参考。具体如下:

这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦。

运行效果截图如下:

jQuery实现响应鼠标背景变化的动态菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
  body{
  background-color: #333; color:#FFFFFF
  }
  a{ color:#FFCC00;}
  #menuBar{
  overflow:hidden;
  width:503px;
  height:102px;
  background: transparent url(images/bar.jpg) no-repeat scroll left top;
  margin:0 auto;
  border:10px solid #111;
  }
  #menuBar ul{
  width:380px;
  margin:0 auto;
  list-style-type: none;
  }
  #menuBar ul li{
  float:left;
  padding-right:40px;
  }
  #menuBar a{
  width:55px;
  height:102px;
  display:block;
  background: transparent url(images/logos.jpg) no-repeat scroll left top;
  padding-top:100px;
  color:#ddd;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  font-size:10pt;
  font-weight:bold;
  outline:none;
  }
  #menuBar a:hover{
  background-image:url(images/logos-over.jpg);
  }
  #menuBar a#Home{
  background-position:-67px top;
  }
  #menuBar a#About{
  background-position:-166px top;
  }
  #menuBar a#Gallery{
  background-position:-266px top;
  }
  #menuBar a#Contact{
  background-position:-373px top;
  }
 </style>
 </head>
 <body>
 <div id="menuBar">
  <ul>
  <li><a href="#" id="Home">Home</a></li>
  <li><a href="#" id="About">About</a></li>
  <li><a href="#" id="Gallery">Gallery</a></li>
  <li><a href="#" id="Contact">Contact</a></li>
  </ul>
 </div><br />
 </body>
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
 $("a").mouseover(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"78px"}, 100);
 }).mouseout(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"100px"}, 100);
 });
 });
 </script>
</body>
</html>

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

Javascript 相关文章推荐
用jquery来定位
Feb 20 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
JavaScript中的Function函数
Aug 27 #Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
javascript中判断json的方法总结
Aug 27 #Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 #Javascript
You might like
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
一段实时更新的时间代码
2006/07/07 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
Python socket编程实例详解
2015/05/27 Python
python实现验证码识别功能
2018/06/07 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python数组循环处理方法
2019/08/26 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
信息技术专业个人自我评价
2013/12/11 职场文书
党委班子对照检查材料
2014/08/19 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
党支部评议意见
2015/06/02 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
员工给公司的建议书
2019/06/24 职场文书