jQuery实战之仿Flash跳动的按钮效果

81427005

2011-04-15

下面这个小例子，灵感来源于百度有啊的应用(现在好像没有了)，就是当鼠标移上去和移除，图标会有缓动的效果。效果不比flash的差。

下面是的效果图：图标很好设计，在这里就不教大家怎么设计了。

jQuery实战之仿Flash跳动的按钮效果

下面是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(){//回调函数控制   




              $($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事件，用回调函数控制弹回去时候的效果。阴影的距离感是通过透明度控制的。

下面是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>

大家在用的时候，只需要设计出好看的图标就可以了。

jquery