本文实例讲述了jQuery实现背景弹性滚动的导航效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景弹性滚动的导航效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <> <style type="text/css"> .nav-wrap { margin: 0 auto; background-color: #121212; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; } .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } *:first-child+html .group { /* IE7 */ zoom: 1; } #example { width: 960px; margin: 0 auto; list-style: none; position: relative; } #example li { display: inline; } #example li a { position: relative; z-index: 200; color: #AAA; font-size: 14px; display: block; float: left; padding: 12px 10px 10px 10px; text-decoration: none; text-transform: uppercase; } #example li a:hover { color: #FFF; } #example #magic-line-two { width: 100px; position: absolute; top: 0; left: 0; background: #666; z-index: 100; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .current a { color: #FFF !important; } </style> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $el, leftPos, newWidth, $mainNav = $("#example"); /* EXAMPLE */ $mainNav.append("<li id='magic-line-two'></li>"); var $magicLineTwo = $("#magic-line-two"); $magicLineTwo .width($(".current").width()) .height($mainNav.height()) .css("left", $(".current a").position().left) .data("origLeft", $(".current a").position().left) .data("origWidth", $magicLineTwo.width()) .data("origColor", $(".current a").attr("rel")); $("#example li").find("a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLineTwo.stop().animate({ left: leftPos, width: newWidth, backgroundColor: $el.attr("rel") }) }, function() { $magicLineTwo.stop().animate({ left: $magicLineTwo.data("origLeft"), width: $magicLineTwo.data("origWidth"), backgroundColor: $magicLineTwo.data("origColor") }); }); }); </script> </head> <body> 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br> <> <div> <ul id="example"> <li><a href="#" _fcksavedurl="#">Home</a></li> <li><a href="#" _fcksavedurl="#">About me</a></li> <li><a href="#" _fcksavedurl="#">Our Team</a></li> <li><a href="#" _fcksavedurl="#">Portfolio</a></li> <li><a href="#" _fcksavedurl="#">The Show</a></li> <li><a href="#" _fcksavedurl="#">Videos</a></li> <li><a href="#" _fcksavedurl="#">CSS/HTML</a></li> <li><a href="#" _fcksavedurl="#">jQuery</a></li> <li><a href="#" _fcksavedurl="#">Navigation</a></li> <li><a href="#" _fcksavedurl="#">Wordpress</a></li> <li><a href="#" _fcksavedurl="#">Contact</a></li> </ul> </div> </body> </html>
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
希望本文所述对大家jQuery程序设计有所帮助。