群组首页 → Web前端 → 淘宝开放平台 → 论坛
发表回复

jQuery图片弹性变大变小

agevs 2014-09-09

本篇文章实现的是当光标放到特定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(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.     };  

 
发表回复
Global site tag (gtag.js) - Google Analytics