Javascript 计算图像A比图像B大多少 JS解题中的一些数学计算

我正在开发一个缩放图像功能，该功能可以创建一个新的

div

，其中包含一个根据图像上的鼠标移动在x和y方向移动的大图像

大图像应该移动一定的百分比，这就是我想弄清楚的。它应该移动多少

以下是一些信息：

• 小图像的大小和正方形总是相同的。（实际上总是221px 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继续……

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

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

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

---

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

这只是一点简单的数学

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;" />

Left=600+1/2*221-1/2*1000=210（四舍五入）
顶部=700+1/2*221-1/2*1000=310（四舍五入）

使用此计算，您可以确定需要将大图像/div放置在相对于其他对象居中的位置

---

编辑： 若要将它们放在一起，假设bigImage是viewport的子对象，则需要使用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>

Left=0+1/2*221-1/2*1000=-390（四舍五入）
顶部=0+1/2*221-1/2*1000=-390（四舍五入）

---

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

好的，我得到了您的答案。。但我想完善我的问题。大图像位于一个隐藏了溢出的div内，因此内部的图像将被移动X和Y以显示应缩放的部分，而小图像不会定位在其静态位置。缩放器是一样的-只是用负值代替左/上的正值。确保您的“视口”设置了position:relative，然后内部的“大图像div”将根据视口的位置相对计算其位置。好的，对不起，我应该很清楚，您介意相应地编辑答案吗？非常感谢。注意，我必须重新计算正确的位置，因为这次我们的t和l改变了。明白了，非常感谢，顺便说一句，谢谢你的博客，我在那里发现了一些有趣的东西