如何制作图像放大/缩小动画答案

【问题标题】：how to make the image zoom(in/out) animation如何制作图像放大/缩小动画
【发布时间】：2012-10-26 15:11:44
【问题描述】：

我有一个 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被鼠标滚动时，我想替换图像的src，在替换过程中，我想做动画。（使图像放大/缩小）。

其实你应该已经猜到了，我想要的很像谷歌地图滚动时的缩放动画。

有什么建议吗？

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

1）对于单张图片，我知道如何通过js或css3制作缩放动画。

但是，div 中的图像在内容上是连续的。就像 goole 地图中的tile。

所以我必须在动画过程中保持这种连续性，例如，当图像都按 1.1 缩放时，必须重新更改它们的位置以保持其内容的连续性。

2) 我要支持ie7+

【问题讨论】：

标签： javascript animation css-animations

【解决方案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*/
}

【讨论】：