jQuery实现背景弹性滚动的导航效果
本文实例讲述了jQuery实现背景弹性滚动的导航效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>背景弹性滚动的导航效果</title>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<!--把下面代码加到<head>与</head>之间-->
<styletype="text/css">
.nav-wrap{
margin:0auto;
background-color:#121212;
border-top:1pxsolid#FFF;
border-bottom:1pxsolid#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:0auto;
list-style:none;
position:relative;
}
#exampleli{
display:inline;
}
#examplelia{
position:relative;
z-index:200;
color:#AAA;
font-size:14px;
display:block;
float:left;
padding:12px10px10px10px;
text-decoration:none;
text-transform:uppercase;
}
#examplelia: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;
}
.currenta{
color:#FFF!important;
}
</style>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
var$el,leftPos,newWidth,
$mainNav=$("#example");
/*
EXAMPLE
*/
$mainNav.append("<liid='magic-line-two'></li>");
var$magicLineTwo=$("#magic-line-two");
$magicLineTwo
.width($(".current").width())
.height($mainNav.height())
.css("left",$(".currenta").position().left)
.data("origLeft",$(".currenta").position().left)
.data("origWidth",$magicLineTwo.width())
.data("origColor",$(".currenta").attr("rel"));
$("#exampleli").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>之间-->
<divclass="nav-wrap">
<ulclass="group"id="example">
<liclass="current"><ahref="#"_fcksavedurl="#">Home</a></li>
<li><ahref="#"_fcksavedurl="#">Aboutme</a></li>
<li><ahref="#"_fcksavedurl="#">OurTeam</a></li>
<li><ahref="#"_fcksavedurl="#">Portfolio</a></li>
<li><ahref="#"_fcksavedurl="#">TheShow</a></li>
<li><ahref="#"_fcksavedurl="#">Videos</a></li>
<li><ahref="#"_fcksavedurl="#">CSS/HTML</a></li>
<li><ahref="#"_fcksavedurl="#">jQuery</a></li>
<li><ahref="#"_fcksavedurl="#">Navigation</a></li>
<li><ahref="#"_fcksavedurl="#">Wordpress</a></li>
<li><ahref="#"_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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。