jQuery图片弹性变大变小

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

 

HTML代码:

.代码  
  1. <div class="banner">  
  2.     <div class="inside">  
  3.         <a href="http://www.jquery001.com/">  
  4.             <span>jQuery学习系列</span>  
  5.             <img class="pic_bg" src="pic01.jpg" alt="title #1"/>  
  6.             <img class="pic_shuoming" src="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(747165503514, -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.     };  

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。