jQuery实现背景弹性滚动的导航效果_ 这篇文章主要介绍了jQuery实现背景弹性滚动导航效果的方法,涉及jQuery动态操作页面元素样式的相关技巧,需要的伴侣可以参考下 本文实例讲解并描述了jQuery实现背景弹性滚动的导航效果。分享给大家供大家参考，具体如下： 代码如下: !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l 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=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 nav-wrap ul group id=example li currenta href=# _fcksavedurl=#Home/a/li lia href=# _fcksavedurl=#About me/a/li lia href=# _fcksavedurl=#Our Team/a/li lia href=# _fcksavedurl=#Portfolio/a/li lia href=# _fcksavedurl=#The Show/a/li lia href=# _fcksavedurl=#Videos/a/li lia href=# _fcksavedurl=#CSS/HTML/a/li lia href=# _fcksavedurl=#jQuery/a/li lia href=# _fcksavedurl=#Navigation/a/li lia href=# _fcksavedurl=#Wordpress/a/li lia href=# _fcksavedurl=#Contact/a/li /ul /div /body /html 盼望本文所述对大家jQuery程序设计有所关心。 .