javascript - 在页面加载时缩放图像

Question

当有人打开新页面时，我想获得缩放图像的效果。因此，每个页面都应该有自己的图像，每次打开页面时都会放大。我在这个网站上有一个例子：http: //www.fashionclub70.be/（点击“精简版”）。

如果用户单击菜单项，则会打开相应的页面并放大图像。在这个网站上，它是用 Flash 完成的，但我只想使用 Javascript。我真的没有Flash的工作知识。您对我有一些建议，以便我可以成功实施吗？

谢谢

马丁

Answer 1

您可以使用画布并在其上放置图片。你需要的一切都可以在这里找到：http: //www.html5canvastutorials.com/tutorials/html5-canvas-images/

编辑：如果你想使用 CSS3，你可以使用

#pix{width:200px;height:300px;transition: all 2s;}

#pic:hover{transform:scale(4) translate(100px,100px)}

这将使带有此 id 标记的 div 向右移动，并在 2 秒内变大 4 倍。:hover 部分只是一个会使转换滴答作响的事件。猜猜你想改用 :active 。

Answer 2

我想最简单的解决方案是使用这样的东西：http ://sliderjs.org/ 。基本上，您会放置一个空的占位符并将您的图像加载到一些不可见的 div 元素中。然后，使用绑定到图像的 onload 事件的回调来启动过渡效果。