jQuery照片伸縮效果不影響其他元素的佈局_jquery

之前在網路上看到這種特效，無奈當時沒有收藏網址，導致後來一度不知道這個特效是怎麼實現的。今天特意在網路上搜羅了一下，果然功夫不負有心人，被我找到了。

我也努力過自己嘗試著寫：

但只是單純的圖片放大，而且還影響了圖片周圍的元素的佈局(因為圖片放大佔據了更大的空間)。

後來發現要靈活巧妙的運用overflow和position這兩個屬性，就能達到目的。其實我覺得CSS(CSS3)中的overflow和position(順帶的top,bottom,left,right)簡直是做網頁特效無解的組合，當然還是js(jquery)是老大。

廢話說了這麼多，大家肯定還是很疑惑：這到底是什麼特效呢？唉，我的語言表達能力還是很一般，下面我就截圖來說明好了：

這個是網頁打開的初始模樣：
 
當把滑鼠停留在以上6張圖片的任一張圖片的時候，會出現我所說的特效(這裡我把滑鼠放在第3張作為範例)：
 
你會發現圖片是縮小了，滑鼠放開圖片感覺又放大了(回到初始狀態),而沒有圖片溢出的現象，而且不影響其他圖片和元素的佈局。

下面貼程式碼了：

複製程式碼 程式碼如下:

$(function() {
$('#col img').hover(
function(){
var $this = $(this) ;
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.5','height':'500px' ,'top':'-66.5px','left':'-150px'});
}
);
});