| 标题 | jQuery实现背景弹性滚动的导航效果 |
| 内容 | 这篇文章主要介绍了jQuery实现背景弹性滚动导航效果的方法,涉及jQuery动态操作页面元素样式的相关技巧,需要的朋友可以参考下 本文实例讲述了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" /> <!--把下面代码加到<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> <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> 希望本文所述对大家jQuery程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。