使用jquery制作背景变化菜单

发布于，归属于jquery教程。 前6个座位已被强势霸占！ 共有982人围观    

jquery动画函数animate是不支持背景移动动画的，即无法对backgroundPosition进行处理，需要使用一个插件，这个插件名为jquery.backgroundPosition，接下来将使用这个插件，制作一个背景变化的菜单。

制作过程

1、创建如下html菜单结构
  1. <ul>
  2.                 <li><a href="http://www.36ria.com/">首页</a></li>
  3.                 <li><a href="http://www.36ria.com/">关于作者</a></li>
  4.                 <li><a href="http://www.36ria.com/">联系作者</a></li>
  5.             </ul>
2、加上css样式
  1. ul {list-style:none;margin:0;padding:0;}
  2. li {float:left;width:100px;margin:0;padding:0;text-align:center;font-size:14px;}
  3. li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
  4. li a {background:url(../images/bg2.jpg) repeat 0 0;}
  5. li a:hover, li a:focus, li a:active {background-position:-150px 0;}

示例中有5个demo，共用了四张背景图片：




分别对应相应的动画demo样式：

  1. #a a {background:url(../images/bg.jpg) repeat -20px 35px;}
  2. #b a {background:url(../images/bg2.jpg) repeat 0 0;}
  3. #c a {background:url(../images/bg3.jpg) repeat 0 0;}
  4. #d a {background:url(../images/bg4.jpg) repeat 0 0;}
3、javascript脚本

引入jquery库和jquery.backgroundPosition：

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
  1. $(function(){
  2.     $('#a a')
  3.         .css( {backgroundPosition: "-20px 35px"} )
  4.         .mouseover(function(){
  5.             $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
  6.         })
  7.         .mouseout(function(){
  8.             $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
  9.                 $(this).css({backgroundPosition: "-20px 35px"})
  10.             }})
  11.         })
  12.     $('#b a')
  13.         .css( {backgroundPosition: "0 0"} )
  14.         .mouseover(function(){
  15.             $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
  16.         })
  17.         .mouseout(function(){
  18.             $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
  19.                 $(this).css({backgroundPosition: "0 0"})
  20.             }})
  21.         })
  22.     $('#c a')
  23.         .css( {backgroundPosition: "0 0"} )
  24.         .mouseover(function(){
  25.             $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  26.         })
  27.         .mouseout(function(){
  28.             $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  29.         })
  30.     $('#d a')
  31.         .css( {backgroundPosition: "0 0"} )
  32.         .mouseover(function(){
  33.             $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  34.         })
  35.         .mouseout(function(){
  36.             $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  37.         })
  38. });

引入jquery.backgroundPosition后animate()开始支持backgroundPosition背景位移动画。后二个颜色渐变的例子，也是通过渐变背景图片上下移动产生的。

原文：http://snook.ca/archives/javascript/jquery-bg-image-animations/

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

6个座位已被强势霸占！

  1. 下载

    不错

  2. 绝版黑色

    我现在用的是那个默认的导航栏, 不过加了一串页面链接函数 让他分类和页面都显示嘿嘿.

  3. silenus

    这个很实用

  4. 百度笨

    写得非常之详细，很好的资源

  5. danny

    怎么才能让它能保持当前选中的页面那

    明河共影回复于 2010年08月23日 11:32

    呵呵，这个要你自己加代码了，主要是当点击菜单项后，加上样式

同类