在页面加载时缩放图像

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倍。 ：悬停部分只是一个会使转换成为事件的事件。猜猜你想要使用：激活而不是。

Answer 2

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