jQuery实战之仿Flash跳动的按钮效果-css文字跳动特效代码

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

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

新加了源码下载：下载

原文链接：http://www.cnblogs.com/blacksheep/archive/2011/04/13/2014416.html

【编辑推荐】