如何使（輸入/輸出）動畫

Question

圖像縮放我有一個div容器，它有幾個圖像，像這樣：

<div style="width:600px;height:600px;> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
    <img src="" alt="" /> 
</div> 

而且div裏面所有的圖像具有相同的尺寸。

現在當div mousescrolled，我想替換src的圖像，在替換期間，我想做動畫。（使圖像放大/縮小）。

事實上，你應該猜測，我想要的東西很像當你在地圖上滾動時谷歌地圖的縮放動畫。

有什麼建議嗎？

====================================== 更新：

1 ）對於單張圖片，我知道如何通過js或css3製作縮放動畫。

但是，div內部的圖像在內容上是連續的。就像goole地圖中的tile一樣。

所以我必須在動畫過程中保持這種連續性，例如當圖像縮放1.1倍時，必須重新調整它們的位置以保持其內容的連續性。

2）我要支持IE7 +

Answer 1

這個代碼在IE以外所有現代瀏覽器。因爲，這是css3解決方案。

http://www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery/

img { 
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ 
-moz-transform:scale(0.8); /*Mozilla scale version*/ 
-o-transform:scale(0.8); /*Opera scale version*/ 
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ 
-moz-transition-duration: 0.5s; /*Mozilla duration version*/ 
-o-transition-duration: 0.5s; /*Opera duration version*/ 
} 

img:hover { 
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ 
-moz-transform:scale(1.1); /*Mozilla scale version*/ 
-o-transform:scale(1.1); /*Opera scale version*/ 
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ 
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ 
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ 
}