<!DOCTYPE html"> <html lang="en"> <head> <title>背景弹性滚动的导航效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!--把下面代码加到<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="http://apps.bdimg.com/libs/jquery/1.4.4/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> <!--把下面代码加到<body>与</body>之间--> <div class="nav-wrap"> <ul class="group" id="example"> <li class="current"><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> 提示:你可以先修改部分代码再运行。 转载请注明:有爱前端 » 背景弹性滚动的导航效果 喜欢 (2)or分享 (0)