超炫的button按钮样式-赶上flash喽

超炫的button按钮效果，先看看效果吧。

第一个效果是没有jquery的效果，只用了css。
第二个是用jquery让北京图片从上往下出来的效果，图片做了特殊效果，很炫吧，高尚flash效果了。
第三个是背景图片左右移动的效果。
第四第五个是图片上下移动渐显渐隐效果。
html

<ul> 
   <li><a href="#">Home</a></li> 
   <li><a href="#">About</a></li> 
   <li><a href="#">Contact</a></li> 
</ul>

 

css

 

ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#FFF; text-decoration:none; border-right:1px solid #FFF; }
li a { background:url(bg.jpg) repeat 0 0; }
li a:hover { background-position:50px 0; }

jquery

$('#nav a')    
.css( {backgroundPosition: "0 0"} )  
.mouseover(function(){      
$(this).stop().animate(             {backgroundPosition:"(0 -250px)"},             {duration:500})       
})    .mouseout(function(){        
$(this).stop().animate(           
{backgroundPosition:"(0 0)"},  {duration:500})        
})

 

当然还用到了一个封装的js文件，就是对backgroundPosition的封装。
 当然要提供打包下载了72色