javascript - 单击以在 JavaScript 中缩放和调整图像大小

Question

我想做一些类似于下面链接中的效果的事情。

http://wallbase.cc/wallpaper/549871

图像最初根据用户的屏幕分辨率进行渲染，如果图像大于用户的屏幕分辨率，请单击图像逐步调整大小。

有人可以指导我如何去做吗？

我不太擅长 jQuery，所以希望有一个“傻瓜式”方法。

谢谢

Answer 1

这非常简单。所发生的只是图像上的单击事件正在更改图像的宽度和高度。像这样的事情:

var img = $('img');
var zoomWidthIncrement = img.width() * 1/3;
var zoomHeightIncrement = img.height() * 1/3;

img.click(function(){
    img.css({width: img.width() + zoomWidthIncrement, height: img.height() + zoomHeightIncrement});
});

您还可以简单地使用 animate() 更改 css 值来设置缩放动画。