Question

我根据与图像中心相关的鼠标位置here创建了这个具有简单缩放效果的小图库它工作得非常好，但只有当容器有100％的宽度时，如果我将宽度改为50％并且边距到中心，它会完全破坏脚本，如图所示here是什么导致这种不必要的鼠标位置行为？我正在用基本矢量运算来计算距离，例如

 function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2)));
    }

Answer 1

第二个版本没有考虑边际。在第一个示例中，边距为0，因此不需要，请尝试：

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + nav.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2)));
}

检查出来：https://jsfiddle.net/caeth/gj221c1r/2/

Mousemove位置错误

1 个答案: