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');

首先，您必须拥有图像的第一个高度。接下来，您将使图像的大小加倍（缩放效果）。下一步是计算scalechange。你将能够找到多种解释和许多计算方法，我的方法和另一种方法一样好。呈现的两个偏移是您的图像将采用的新位置（简单因子计算，就像在价格上制作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对象（放大，移动缩放图像，...）

希望它会帮助别人！

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

1 个答案: