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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-mouse-cha-BG-pic-menu-codes/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejquery动态导航菜单效果/title style type=' text/CSS ' media=' screen ' body { background-color : # 333；color : # FFFFFF } a { color : # ffcc 00；} #菜单栏{ overflow:hidden宽度宽度：503 x重量：102pxbackground:透明url(图像/bar.jpg)无重复滚动左上方；margin :0 auto order :10 px固体# 111;} # MenuBar ul { width :380 pxmargin :0 auto列表样式类型：无；} # menuBar ul li { float:left填充-右侧：40 px} # MenuBar a { width :55 pxh three :102 px显示：块；背景技术：透明url(图像/徽标. jpg)无重复滚动左上方；衬垫-顶部：100像素；color : # DDD font-family : Arial，' MS Trebuchet '，无衬线；文本装饰：无；font-size :10 pt字体粗细：加粗；outline : none } # MenuBar a :悬停{ background-image : URL(图像/徽标-over。jpg)；} #菜单栏a #主页{背景-位置顶部：-67px；} #菜单栏a #关于{背景-位置顶部：-166px；} #菜单栏a #图库{背景-位置：-266 px顶部；} #菜单栏a #联系人{背景-位置：-373px顶部；}/style/head body div id=' MenuBar ' ul lia href=' # ' id=' Home ' Home/a/Li lia href=' # ' id=' About ' About/a/Li lia href=' # ' id=' Gallery ' Gallery/a/Li lia href=' # ' id=' Contact ' Contact/a/Li/ul/div br//body脚本类型=' text/JAVAScript ' src=' http 3360 jquery-1。6 .2 .量滴js '/ready(function() { $('a ')).将鼠标移到(function(){ var selected=' # ' $(this)).attr(' id ')；$(选定)。动画({ paddingTop: ' 78px ' }，100)；}).鼠标移出(函数(){ var selected=' # ' $(this)).attr(' id ')；$(选定)。动画({ paddingTop: ' 100px ' }，100)；});});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。