javascript - 使用jquery计算从div中心到屏幕中心的直接(对 Angular 线)距离

Question

嘿!

是否可以用jquery读取/计算div中心与屏幕中心之间的直接距离？

我不需要 div 到屏幕垂直中心的距离(只给出高度距离)或到屏幕水平中心的距离(只给出宽度距离)，而是对 Angular 线距离。

这对于像素来说是可能的吗？

感谢您提前提供的帮助， 亲切的问候

卢卡斯

Answer 1

无论您如何向下滚动页面，这都应该有效。

let element = document.getElementById("someId");
let elementPosition = getCenterOfElement(element);
let documentPosition = getCenterOfPage();
let result = calculateDistance(documentPosition , elementPosition);

function getCenterOfPage() {
    let x = $(document).width()/2;
    let y = $(document).height()/2;
    let coordinates = {x, y};
    return coordinates;
}
function getCenterOfElement(element) {
    let x = $(element).offset().left + $(element).outerWidth()/2;
    let y =  $(element).offset().top + $(element).outerHeight()/2;
    let coordinates = {x, y};
    return coordinates;
}
function calculateDistance(coordinates1, coordinates2) {
    let h = coordinates1.x - coordinates2.x;
    let v = coordinates1.y - coordinates2.y;
    let result = Math.sqrt(h*h + v*v);
    return result;
}