如何使图像缩放(进/出)动画

时间:2012-10-26 06:33:37

标签: javascript animation css-animations

我有一个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,在替换期间,我想制作动画。(使图像放大/缩小)。 / p>

事实上,当你在地图上滚动时,你应该猜测我想要的东西很像谷歌地图的缩放动画。

有什么建议吗?

====================================== 更新:

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

但是,div内的图片内容是连续的。就像goole地图中的tile一样。

所以我必须在动画期间保持连续,例如,当图像按1.1缩放时,必须改变它们的位置以保持其内容的连续性。

2)我必须支持ie7 +

1 个答案:

答案 0 :(得分:3)

此代码适用于除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*/
}