使用jQuery background-position插件

在过去的web开发和设计中，大家往往使用flash来创建炫酷的菜单效果，随着js和web技术的发展，现在大家可以使用简单的javascript代码生成同样漂亮的菜单效果，在今天的这个简单教程中，我们将带领大家使用jQuery的background-position插件来开发漂亮的导航条效果，希望大家喜欢！

相关插件：

• jQuery background-position

主要思路：

在这个特效中，我们使用jQuery的background-position插件来动画背景的位置来达到背景变化的特效。你可以使用正负的背景图片坐标位置来定义动画的过程，注意这里你需要自己创建一个合适的背景图片来加强这种动画效果。

当我们动态的移动背景图片位置的时候，可以产生波浪或者淡入淡出，或者倾斜移动效果。

HTML代码

html代码很简单，用ul生成导航菜单的框架，如下：

<ul id="nav1">
<li><a href="#">Home</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<br /><br />
<ul id="nav2">
<li><a href="#">Home</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<br /><br />
<ul id="nav3">
<li><a href="#">Home</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul> 

这里我们生成3个导航菜单，分别使用不同的jQuery动画菜单效果。

CSS代码

css代码定义了每个菜单<a>标签的背景图片，如下：

#nav1 li a {
display:block;
padding: 0px 80px;
height:100%;
color:#AAA;
text-decoration:none;
text-shadow: 2px 2px 2px #707070;
font-weight: bold;
border-left: 5px solid #707070;
background:url(../images/light.png) repeat 0 0;
}
#nav2 li a {
display:block;
padding: 0px 80px;
height:100%;
color:#AAA;
text-decoration:none;
text-shadow: 2px 2px 2px #707070;
font-weight: bold;
border-left: 5px solid #707070;
background:url(../images/light2.png) repeat 0 0;
}
#nav3 li a {
display:block;
padding: 0px 80px;
height:100%;
color:#AAA;
text-decoration:none;
text-shadow: 2px 2px 2px #707070;
font-weight: bold;
border-left: 5px solid #707070;
background:url(../images/light3.png) repeat 0 0;
}

Javascript代码

在js代码中，我们调用简单的js就可以动态的控制背景图片位置，如下：

/*
GBin1 Navigation Effect
*/
$(document).ready(function{
$('#nav1 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function{
$(this).stop.animate(
{backgroundPosition:"(-280px 0px)"}, 
{duration:1000})
})
.mouseout(function{
$(this).stop.animate(
{backgroundPosition:"(0 0)"}, 
{duration:1000})
});
$('#nav2 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function{
$(this).stop.animate(
{backgroundPosition:"(300px 300px)"}, 
{duration:1000})
})
.mouseout(function{
$(this).stop.animate(
{backgroundPosition:"(0px 0)"}, 
{duration:1000})
});
$('#nav3 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function{
$(this).stop.animate(
{backgroundPosition:"(300px 250px)"}, 
{duration:1000})
})
.mouseout(function{
$(this).stop.animate(
{backgroundPosition:"(0 0)"}, 
{duration:1000})
});
});

在以上代码中，我们控制鼠标移入链接和移出链接的操作，这个时候，background-position插件会帮助我们生成正确的动画效果。

具体效果，请查看在线演示，希望大家喜欢这个特效，只要你有足够好的想象力，你可以开发出变化无穷的菜单特效，如果你有任何建议和问题，请给我们留言，谢谢！