本文实例讲述了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-IE8 var 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 fallback start = '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程序设计有所帮助。
【jQuery实现的背景动态变化导航菜单效果】相关文章：