用jQuery制作动画背景导航菜单

大 | 中 | 小
[不指定 2013/05/18 23:32 | by 刘新修 ]

 该实例利用jQuery效果animate() 方法改变CSS背景定位属性实现动画效果，CSS背景属性值是逐渐改变的，这样视觉上就达到动画效果。

在写入这样的无序列表：

XML/HTML代码
  1. <ul>  
  2.   <li><a href="#">Home</a></li>  
  3.   <li><a href="#">About</a></li>  
  4.   <li><a href="#">Contact</a></li>  
  5. </ul>  

定义下面的CSS样式：

CSS代码
  1. ul { list-style:none; margin:0; padding:0; }  
  2. li { float:left; width:100px; margin:0; padding:0; text-align:center; }  
  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(bg.jpg) repeat 0 0; }  
  5. li a:hover { background-position:50px 0; }  

下面是实现效果的核心jQuery代码：

JavaScript代码
  1. $('#nav a').css({  
  2.     backgroundPosition: "0 0"  
  3. }).mouseover(function () {  
  4.     $(this).stop().animate({  
  5.         backgroundPosition: "(0 -250px)"  
  6.     }, {  
  7.         duration: 500  
  8.     })  
  9. }).mouseout(function () {  
  10.     $(this).stop().animate({  
  11.         backgroundPosition: "(0 0)"  
  12.     }, {  
  13.         duration: 500  
  14.     })  
  15. })  

 

Tags: , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4205)