使用jQuery background-position插件来创建超酷的导航条效果

• 在线演示1
•  
• 本地下载
 

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

相关插件：

• jQuery background-position

主要思路

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

详见原文链接：http://www.gbtags.com/gb/share/5864.htm

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

HTML代码

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

1. <ul id="nav1">
2. <li><a href="#">Home</a></li>
3. <li><a href="#">Portofolio</a></li>
4. <li><a href="#">Customer</a></li>
5. <li><a href="#">About</a></li>
6. <li><a href="#">Contact</a></li>
7. </ul>
9. <br /><br />
11. <ul id="nav2">
12. <li><a href="#">Home</a></li>
13. <li><a href="#">Portofolio</a></li>
14. <li><a href="#">Customer</a></li>
15. <li><a href="#">About</a></li>
16. <li><a href="#">Contact</a></li>
17. </ul>
19. <br /><br />
21. <ul id="nav3">
22. <li><a href="#">Home</a></li>
23. <li><a href="#">Portofolio</a></li>
24. <li><a href="#">Customer</a></li>
25. <li><a href="#">About</a></li>
26. <li><a href="#">Contact</a></li>
27. </ul>

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

CSS代码

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

1. #nav1 li a {
2. display:block;
3. padding: 0px 80px;
4. height:100%;
5. color:#AAA;
6. text-decoration:none;
7. text-shadow: 2px 2px 2px #707070;
8. font-weight: bold;
9. border-left: 5px solid #707070;
10. background:url(../images/light.png) repeat 0 0;
11. }
12.  
13. #nav2 li a {
14. display:block;
15. padding: 0px 80px;
16. height:100%;
17. color:#AAA;
18. text-decoration:none;
19. text-shadow: 2px 2px 2px #707070;
20. font-weight: bold;
21. border-left: 5px solid #707070;
22. background:url(../images/light2.png) repeat 0 0;
23. }
24.  
25. #nav3 li a {
26. display:block;
27. padding: 0px 80px;
28. height:100%;
29. color:#AAA;
30. text-decoration:none;
31. text-shadow: 2px 2px 2px #707070;
32. font-weight: bold;
33. border-left: 5px solid #707070;
34. background:url(../images/light3.png) repeat 0 0;
35. }

Javascript代码

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

1. /*
2. GBin1 Navigation Effect
3. */
4.  
5. $(document).ready(function(){
6. $('#nav1 a')
7. .css( {backgroundPosition: "0 0"} )
8. .mouseover(function(){
9. $(this).stop().animate(
10. {backgroundPosition:"(-280px 0px)"},
11. {duration:1000})
12. })
13. .mouseout(function(){
14. $(this).stop().animate(
15. {backgroundPosition:"(0 0)"},
16. {duration:1000})
17. });
19. $('#nav2 a')
20. .css( {backgroundPosition: "0 0"} )
21. .mouseover(function(){
22. $(this).stop().animate(
23. {backgroundPosition:"(300px 300px)"},
24. {duration:1000})
25. })
26. .mouseout(function(){
27. $(this).stop().animate(
28. {backgroundPosition:"(0px 0)"},
29. {duration:1000})
30. });
32. $('#nav3 a')
33. .css( {backgroundPosition: "0 0"} )
34. .mouseover(function(){
35. $(this).stop().animate(
36. {backgroundPosition:"(300px 250px)"},
37. {duration:1000})
38. })
39. .mouseout(function(){
40. $(this).stop().animate(
41. {backgroundPosition:"(0 0)"},
42. {duration:1000})
43. });
44. });

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

原文链接：http://www.gbtags.com/gb/share/5864.htm

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