jQuery實戰(zhàn)之仿Flash跳動的按鈕效果
作者：Mr.mac
運用jQuery在配合漂亮的UI，就可以做出讓用戶賞心悅目的體驗。
下面這個小例子，靈感來源于百度有啊的應用(現(xiàn)在好像沒有了)，就是當鼠標移上去和移除，圖標會有緩動的效果。效果不比flash的差。
51CTO推薦專題：jQuery從入門到精通 jQuery給力插件大閱兵
下面是的效果圖：圖標很好設計，在這里就不教大家怎么設計了。
下面是JQ的代碼部分：
- $(function(){
- //append img to LI
- $("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"
- width="60" height="32" alt="" />');//這是陰影的圖片
- //append hover event
- $("#nav-shadow li").hover(function(){
- //define e for tihs
- var $e = this;
- $($e).find("a").stop().animate({marginTop:'-14px'},250,function(){//回調(diào)函數(shù)控制
- $($e).find("a").animate({marginTop:'-10px'},250);
- });
- $($e).find("img.shadow").stop().animate({width:"80%",opacity:"0.3",marginLeft:"8px"},250);
- },function(){
- var $e = this;
- $($e).find("a").stop().animate({marginTop:"4px"},250,function(){
- $($e).find("a").animate({marginTop:"0px"},250);
- });
- $($e).find("img.shadow").stop().animate({width:"100%",opacity:"1",marginLeft:"0px"},250);
- }
- )
- })
分析：
首先增加倒影：
- $("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"
- width="60" height="32" alt="" />')
然后注冊，hover事件，用回調(diào)函數(shù)控制彈回去時候的效果。陰影的距離感是通過透明度控制的。
下面是HTML代碼：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>button_effect</title>
- <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
- <script type="text/javascript" src="action.js"></script>
- <style type="text/css">
- *{ margin:0; padding:0;}
- div{ width:500px; height:500px; margin:100px 0 auto;}
- ul,ol{ list-style:none; list-style-type:none;}
- a,a:visited,a:hover{ display:block; text-decoration:none; color:#ccc; text-indent:-9999px;
- outline: 0 none; width:61px; height:60px; z-index:2; overflow:hidden; position:relative;}
- li{ float:left; width:61px; height:92px; margin-left:10px; position:relative;}
- #nav-shadow li.chang-one a{ background:url(images/button_pic.jpg) no-repeat left top;}
- #nav-shadow li.chang-two a{background:url(images/button_pic.jpg) no-repeat -60px top;}
- #nav-shadow li.chang-three a{background:url(images/button_pic.jpg) no-repeat -120px top;}
- #nav-shadow li.chang-four a{background:url(images/button_pic.jpg) no-repeat -180px top;}
- #nav-shadow li.chang-five a{background:url(images/button_pic.jpg) no-repeat -240px top;}
- #nav-shadow li img.shadow{margin:0 auto; position:absolute; bottom:0px; left:0px; z-index:1;}
- </style>
- </head>
- <body>
- <div id="content">
- <ul id="nav-shadow">
- <li class="chang-one"><a href="#" title="reflaction_one">click me</a></li>
- <li class="chang-two"><a href="#" title="reflaction_two">click me</a></li>
- <li class="chang-three"><a href="#" title="reflaction_three">click me</a></li>
- <li class="chang-four"><a href="#" title="reflaction_four">click me</a></li>
- <li class="chang-five"><a href="#" title="reflaction_five">click me</a></li>
- </ul>
- </div>
- </body>
- </html>
大家在用的時候，只需要設計出好看的圖標就可以了。
新加了源碼下載：下載
原文鏈接：http://www.cnblogs.com/blacksheep/archive/2011/04/13/2014416.html
【編輯推薦】
責任編輯：陳貽新
來源：
博客園
