如何使（输入/输出）动画

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*/ 
}