让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插件会帮助我们生成正确的动画效果。

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