Question

JS问题解决中的一些数学计算

我正在开发一个缩放图像功能，可以创建一个新的div，其中包含一个大图像，该图像根据图像上的鼠标移动通过x和y移动。

大图像应移动一定的％，这正是我想要弄清楚的。它应该移动多少。

以下是一些信息：

小图像总是相同的大小和正方形。（它实际上总是221px X 221px）
大图像变化（也总是方形，可以是任何大小，如1000x1000）
缩放器的视口始终相同。

我想计算小图像的大小（或反之亦然）。

这是一个完整的大脚本。我开始编写计算公式：同样，我想要的是逐步将百分比转换为像素。首先获取％然后将其转换为像素。

    zoomObj.caluculateSizes = function(){
        $(zoomObj.largeImage).load(function(){
            // zoomObj.callingEvent is the small image
           zoomObj.smlImgSize = zoomObj.callingEvent.width()
           zoomObj.lrgImgSize = zoomObj.largeImage.width()

           // How do i go from here?
    })

js继续.......

Answer 1

除非我弄错了，否则这更像是一个数学问题，而不是jQuery问题。要获得百分比，将一个除以另一个并乘以100。

因此，要获得小图像的百分比作为大图像的宽度：

var smallImgWidthPercentage = parseFloat(zoomObj.callingEvent.width() / zoomObj.largeImage.width()) * 100;

虽然，如果你的图像是方形的，那么你只需要算出一个值。

Answer 2

这只是一些简单的数学......

w - width of the small image
W - width of the big image
l - left position of the small image
L - left position of the big image

L = l + 1/2w - 1/2W

h - height of the small image
H - height of the big image
t - top position of the small image
T - top position of the big image

T = t + 1/2h - 1/2H

假设我们的形象是：

<img style="width:221px; height:221px; position:absolute; left:600px; top:700px;" />

答案：

Left = 600 + 1/2*221 - 1/2*1000 = 210 (rounded)
Top = 700 + 1/2*221 - 1/2*1000 = 310 (rounded)

<img style="width:1000px; height:1000px; position:absolute; left:210px; top:310px;" />

使用此计算，您可以确定将大图像/ div放置在相对于另一个对象的居中位置。

编辑：总而言之，假设bigImage是视口的CHILD，你需要使用0作为t，0作为l。

Left = 0 + 1/2*221 - 1/2*1000 = -390 (rounded)
Top = 0 + 1/2*221 - 1/2*1000 = -390 (rounded)

<div id="viewport" style="width:221px; height:221px;overflow:hidden;position:relative;">
    <img id="bigImage" style="width:1000px; height:1000px; position:absolute; left:-390px; top:-390px;" />
</div>

- 如您所见，我使用了负值，因此bigImage将隐藏在视口后面，因为。

计算图像B中图像A的大小

JS问题解决中的一些数学计算

以下是一些信息：

2 个答案: