本篇文章实现的是当光标放到特定a标签上，将显示一个圆形的图片背景，该特效可用于网站导航等，具体效果可看从下图看到：

HTML代码：

.代码  

1. <div class="banner">  
2.     <div class="inside">  
3.         <a href=http://www.mamicode.com/"http://www.jquery001.com/">  
4.             <span>jQuery学习系列</span>  
5.             <img class="pic_bg" src=http://www.mamicode.com/"pic01.jpg" alt="title #1"/>  
6.             <img class="pic_shuoming" src=http://www.mamicode.com/"ziti.png" alt="jQuery" />  
7.         </a>  
8.     </div>  
9. </div>  

 jQuery代码，高度位置初始化：

最专业的UI前端框架！

.代码  

1. var i = 0; var j = 65; var m = 0;  
2.     var arrTop = new Array(74, 71, 65, 50, 35, 14, -15); //初始化高度  
3.     $(".inside a").each(function () {  
4.         //初始化位置  
5.         $(this).find("img").hide();  
6.         $(this).find("span").show();  
7.         i = i + 80;  
8.         marginLeft = i + "px";  
9.         marginTop = arrTop[m] + "px";  
10.         m++;  
11.         $(this).css({ "left": marginLeft, "top": marginTop });  
12.     });  

 引入easing 库：最专业的UI前端框架！

.代码  

1. var easing = "easeInSine", //引入easing ui增加动感效果  
2.     duration = 200,  
3.     animation = {  
4.         width: 120,  
5.         height: 120,  
6.         marginLeft: -30,  
7.         marginTop: -30  
8.     };  

jQuery图片弹性变大变小