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 相关文章推荐
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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仿discuz分页效果代码
2008/10/02 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
javascript基本语法分析说明
2008/06/15 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
python实现计算倒数的方法
2015/07/11 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
浅谈python写入大量文件的问题
2018/11/09 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
股份合作协议书
2014/09/10 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python