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

原文篇幅较长完整代码及内容请见原文:http://www.gbtags.com/gb/share/5864.htm

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

相关插件:

  • jQuery background-position

主要思路

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

原文图片是透明的..然后加上背景是白色的.所以就看不出了,为使文章方便阅读,删除了图片。 

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

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>
  8. <br /><br />
  9. <ul id="nav2">
  10. <li><a href="#">Home</a></li>
  11. <li><a href="#">Portofolio</a></li>
  12. <li><a href="#">Customer</a></li>
  13. <li><a href="#">About</a></li>
  14. <li><a href="#">Contact</a></li>
  15. </ul>
  16. <br /><br />
  17. <ul id="nav3">
  18. <li><a href="#">Home</a></li>
  19. <li><a href="#">Portofolio</a></li>
  20. <li><a href="#">Customer</a></li>
  21. <li><a href="#">About</a></li>
  22. <li><a href="#">Contact</a></li>
  23. </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就可以动态的控制背景图片位置,如下:

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

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

原文篇幅较长完整代码及内容请见原文:http://www.gbtags.com/gb/share/5864.htm

相关推荐