超炫的button按鈕效果，
先看看效果吧。
第一個效果是沒有jquery的效果，只用了css。
第二個是用jquery讓北京圖片從上往下出來的效果，圖片做了特殊效果，很炫吧，高尚flash效果了。
第三個是背景圖片左右移動的效果。
第四第五個是圖片上下移動漸顯漸隱效果。
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
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:20px;*height:29px;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
01.$('#nav a')
02. .css( {backgroundPosition: "0 0"} )
03. .mouseover(function(){
04. $(this).stop().animate(
05. {backgroundPosition:"(0 -250px)"},
06. {duration:500})
07. })
08. .mouseout(function(){
09. $(this).stop().animate(
10. {backgroundPosition:"(0 0)"},
11. {duration:500})
12. })
當(dāng)然還用到了一個封裝的js文件，就是對backgroundPosition的封裝。
72色當(dāng)然要提供
打包下載了
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
