在页面加载时缩放图像

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 事件的回调来启动过渡效果。