jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果。分享给大家供大家参考。具体如下：
这里介绍一款使用jQuery插件制作完成的导航菜单，一大特点是，菜单的背景有动态效果，与使用的背景图片完全变换，动态效果是在鼠标悬停时出现，也就是把鼠标放在菜单上的时候，背景即开始滚动起来，看上去漂亮极了，而且兼容性也是相当不错的，推荐给网页设计者使用。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-codes/
具体代码如下：

<！DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery动态背景的导航菜单</title><script type="text/javascript" src="jquery-1.6.2.min.js" charset="utf-8"></script><script type="text/javascript">$（document）.ready（function（）{ var width = 0; $（"#menu li"）.each（function（） {width += $（this）.width（）+1; }）; var padding = parseInt（（（$（"#menu"）.width（） - width） / $（"#menu li a"）.length）/2）; var pixLeft = （$（"#menu"）.width（） - width）-（padding*$（"#menu li a"）.length*2） $（"#menu li a"）.each（function（index） {if （index+1 ！= $（"#menu li a"）.length） { $（this）.css（"padding", "0 "+padding+"px"）; $（this）.css（"background-position", "-" + $（this）.position（）.left + "px 0"）;} else { padding = padding + （pixLeft/2）; $（this）.css（"padding", "0 "+padding+"px"）; $（this）.css（"background-position", "-" + $（this）.position（）.left + "px 0"）;} }）; $（"#menu li a"）.mouseover（function（）{$（this）.stop（）.animate（{ backgroundPosition: "-" + $（this）.position（）.left - 129 + "px 0"}, 2000）.mouseout（function（）{ $（this）.stop（）.animate（{ backgroundPosition: "-" + $（this）.position（）.left + "px 0"}, 2000）}） }）;}）;（function（$） { if（！document.defaultView || ！document.defaultView.getComputedStyle）{ // IE6-IE8var oldCurCSS = jQuery.curCSS;jQuery.curCSS = function（elem, name, force）{ if（name === "background-position"）{name = "backgroundPosition"; } if（name ！== "backgroundPosition" || ！elem.currentStyle || elem.currentStyle[ name ]）{return oldCurCSS.apply（this, arguments）; } var style = elem.style; if （ ！force && style && style[ name ] ）{return style[ name ]; } return oldCurCSS（elem, "backgroundPositionX", force） +" "+ oldCurCSS（elem, "backgroundPositionY", force）;}; } var oldAnim = $.fn.animate; $.fn.animate = function（prop）{if（"background-position" in prop）{ prop.backgroundPosition = prop["background-position"]; delete prop["background-position"];}if（"backgroundPosition" in prop）{ prop.backgroundPosition = "（"+ prop.backgroundPosition;}return oldAnim.apply（this, arguments）; }; function toArray（strg）{strg = strg.replace（/left|top/g,"0px"）;strg = strg.replace（/right|bottom/g,"100%"）;strg = strg.replace（/（[0-9.]+）（s|）|$）/g,"$1px$2"）;var res = strg.match（/（-?[0-9.]+）（px|\%|em|pt）s（-?[0-9.]+）（px|\%|em|pt）/）;return [parseFloat（res[1],10）,res[2],parseFloat（res[3],10）,res[4]]; } $.fx.step. backgroundPosition = function（fx） {if （！fx.bgPosReady） { var start = $.curCSS（fx.elem,"backgroundPosition"）; if（！start）{//FF2 no inline-style fallbackstart = "0px 0px"; } start = toArray（start）; fx.start = [start[0],start[2]]; //var end = toArray（fx.options.curAnim.backgroundPosition）; var end = toArray（fx.options.curAnim == undefined ? fx.end : fx.options.curAnim.backgroundPosition）; fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; fx.bgPosReady = true;}//return;var nowPosX = [];nowPosX[0] = （（fx.end[0] - fx.start[0]） * fx.pos） + fx.start[0] + fx.unit[0];nowPosX[1] = （（fx.end[1] - fx.start[1]） * fx.pos） + fx.start[1] + fx.unit[1];fx.elem.style.backgroundPosition = nowPosX[0]+" "+nowPosX[1]; };}）（jQuery）;</script><style type="text/css">html { height:100%;min-height:100%;}body { position:relative; margin:0; padding:0; font-size:1em; font:62.8% Arial, Tahoma, Helvetica, sans-serif; min-width:1130px;min-height:100%; height:100%;background: #1e1e1d; color:#FFFFFF;}h1, h2, h3, h4, h5, h6, form, fieldset, dl, ul {margin:0; padding: 0;}strong, b {font-weight:bold;}em, i {font-style:italic;}small {display:block;}fieldset {border:0;}img {border:none;}a { color: #FFCC00; text-decoration: none;}a:hover { text-decoration: underline;}a:focus{ outline-style: none;}.go_back { position: absolute; top: 15px; left: 240px; color: #ff0072; font-size: 1.6em;}#content { position: relative; top: 100px; width:800px;position:relative; margin: 0 auto;}#menu { float: left; width: 800px; list-style: none; line-height: 33px; background: url（"images/menu_bg1.gif"） no-repeat top left; border-top: 1px solid #000; border-bottom: 1px solid #000; margin: 0; padding:0;}#menu li { float: left; border-left: 1px solid #000;}#menu li a { float: left; font-size: 1.2em; color: #fff; border-left: 1px solid #ccc; text-decoration: none; background: url（"images/menu_bg1.gif"） no-repeat top left;}#menu li a:hover { background: url（"images/menu_bg_active.gif"） no-repeat top left;}#menu li:first-child { border: none; }#menu li:first-child a { border: none; }</style></head><body><div id="content"><br /> <ul id="menu"><li><a href="#" title="脚本下载">脚本下载</a></li><li><a href="#" title="网页特效">网页特效</a></li><li><a href="#" title="教程文章">教程文章</a></li><li><a href="#" title="编程类库">编程类库</a></li><li><a href="#" title="最新更新">最新更新</a></li> </ul><br /></div></body></html>

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