鼠标滚动时放大和缩小图像

Question

我想在 HTML 中的鼠标滚动时放大和缩小图像。有多个img标签没有ID. 那么我如何使用 JavaScript 或 Ajax 来实现呢？

Answer 1

只是把答案抛给那些会寻找这个问题答案的人。

首先，您需要找到一个系统来检测鼠标滚动。如果你有勇气，你可以自己开发。如果你不是，你可以找到一些非常好的库（例如：带有 JQuery 的 MouseWheel）。

接下来，您将找到另外两种放大和缩小的方法。

简单的方法

首先，我们来作弊一下。当您需要缩放时，只需将图像的高度和宽度乘以您决定的系数即可。将高度和宽度放入变量中 (JQuery)

var height = $('#image').height();
var width = $('#image').width();

对于您收到的每个卷轴，您只有 2 个选择。一旦你能够知道鼠标滚轮是向上还是向下，你只需要做这样的事情（JQuery）

height *= 2;
width *= 2;

这样，通过将图像尺寸加倍，您就会产生放大的感觉。

不太简单的方法

如果您想像在 GMap 对象中那样放大，您可以执行类似的操作。

var firstHeight = $('#image').height();

height *= 2;
width *= 2;

scalechange = (actualHeight / firstHeight) - 1;
offsetX = -(coordX * scalechange);
offsetY = -(coordY * scalechange);

$("#image").css('top', offsetY + 'px');
$("#image").css('left', offsetX + 'px');

首先，您必须拥有图像的第一高度。接下来，您将图像的大小加倍（缩放效果）。下一步是计算尺度变化。你将能够找到多种解释和多种计算方法，我的方法和其他方法一样好。显示的两个偏移量是图像将采用的新位置（简单的因子计算，就像价格的 x%）。最后一部分是设置图像的新值。

最后，您将能够使用 ou 进行缩放和取消缩放，而无需将图像置于鼠标位置的中心。

注意：上面的计算只是为了放大。您必须做一些数学运算才能缩小！

更进一步？

另一种更进一步的方法是将图像放置在 div 中。

<div id="imageContainer" style="overflow:hidden;">
    <img id="image" src="YourImage">
</div>

通过设置

"overflow:hidden;" 

到你的div，你的图像将会缩放。但所有超出 div 的内容都将被隐藏。如果将 div 设置为图像的原始大小，如下所示（JQuery）

$("#imageContainer").css('height', $('#image').height());
$("#imageContainer").css('width', $('#image').width());

然后您将看到一个始终具有相同尺寸的图像，但您的缩放将有效。如果将其与拖放方法结合起来，您将拥有一个类似 GMap 对象的对象（放大缩小、移动缩放图像……）

希望它能帮助别人！