获取IMG的正确位置并计算到屏幕右侧的距离

Question

我一直在努力找到解决问题的方法。

我的网站上有不同的缩略图，我添加了onmouseover / onmouseout功能。因此，如果将鼠标移到图片上，则会在右上角显示悬停图像（原始大小）。

这一切都很好，但如果我有更大的图像，它会重叠我的拇指img和东西变得疯狂。

所以我想要的是获得我的缩略图IMG标签的右侧位置，并从屏幕尺寸中减去它。屏幕尺寸不是问题，但我的img标签的正确位置是。

我怎么能得到那个位置？ （图中用粗体红线标出）

代码看起来像这样：

function imghover(id, src, width, height) {
        var thumb = document.getElementById(id);
        var hover = document.getElementById('hoverimg');
        alert(thumb.
        hover.src = src;
        if(width > screen.width){
            hover.width = (width / 100) * 20;
            hover.height =  (height/ 100) * 20;
        }
        else if(height > screen.height) {
            hover.width = (width / 100) * 40;
            hover.height =  (height/ 100) * 40;
        }
        else {
            hover.width = width;
            hover.height =  height;
        }

}

正如你所看到的，我拥有我需要的一切：拇指ID，scr for new pic（original），width＆amp;原始的高度。那么如何获得拇指的右侧位置？

提前多多感谢。

Answer 1

权利通常计算为

right = totalScreenWidth - left - sizeOfBox（或者你想要的任何细节+ - ）;

方程式以相对的方式进行。例如，整个事物是在div容器中而不是在窗口中。

你可以离开像...这样的形象。

totalLeft = image.getBoundingClientRect（）。left + imageParent.getBoundingClientRect（）。left + .... cascadingly ..直到你覆盖从图像到窗口的每个元素。

或使用jquery来使用它像$（＃img）.position（）。left .. etc

Answer 2

以下是您的问题的代码：http://jsfiddle.net/B24QL/

您可以在此处查看预览：http://jsfiddle.net/B24QL/embedded/result/

的jQuery

$(document).ready(function(){
var a = $('img').offset().left + $('img').width(),
    b = $(window).width() - a;
alert("Position of right border of image: " + a + "px from left edge.\n Distance between right border and image = " + b + "px.");
});