<!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" /> <!--把下面代码加到<head>与</head>之间--> <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="https://www.jb51.net/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $el, leftPos, newWidth, $mainNav = $("#example"); /* EXAMPLE */ $mainNav.append("<li></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> <!--把下面代码加到<body>与</body>之间--> <div> <ul> <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：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》