本文實例講述了jQuery實現的背景動態變化導航菜單效果。分享給大家供大家參考。具體如下：
這里介紹一款使用jQuery插件制作完成的導航菜單，一大特點是，菜單的背景有動態效果，與使用的背景圖片完全變換，動態效果是在鼠標懸停時出現，也就是把鼠標放在菜單上的時候，背景即開始滾動起來，看上去漂亮極了，而且兼容性也是相當不錯的，推薦給網頁設計者使用。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
