本文實例講述了jQuery實現響應鼠標背景變化的動態菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款jQuery響應鼠標背景變化的動態菜單，菜單的背景在鼠標放上后有所變化，這款菜單的實現主要是使用了圖片，修改菜單的時候要修改圖片，有些麻煩，不過效果不錯，引入的jquery插件是1.7版本，高版本jQuery未測試，應該也可以啦。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-mouse-cha-bg-pic-menu-codes/
具體代碼如下：
<!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程序設計有所幫助。
新聞熱點
疑難解答
