javascript - 在javascript中使用鼠标坐标，如何适应不同的屏幕尺寸？

Question

我正在尝试根据鼠标的 x 和 y 坐标制作一个非常简单的幻灯片。目前我正在 js 中使用像素 - 正如您从代码中看到的那样，当鼠标接近某个点时，每个元素的显示都会更新。有没有办法可以在 javascript 中使用百分比而不是 px？因此，无论屏幕宽度和高度如何，图像都显示在同一点(例如，如果鼠标位于屏幕上方 25%，则更改显示，而不是特定数量的像素)。这是我的代码:

var mouseX;
var mouseY; 

var image1 = document.getElementsByClassName('test')[0];
var image2 = document.getElementsByClassName('test2')[0];

// create variables for percentages of screen?

image1.style.display = "block";
image2.style.display = "none";


function init(){

    document.onmousemove = function(e){
    mouseX = e.screenX;
    mouseY = e.screenY;
    console.log(mouseX, mouseY);
        if (mouseX <= 400) {
            image1.style.display = "none";
            image2.style.display = "block";
        } 
        else if (mouseX => 800) {
            image2.style.display = "none";
            image1.style.display = "block";
        }
       //will add more of the same here
    }
}

Answer 1

您可以进行简单的数学计算来获取屏幕尺寸。

您应该以 window.innerWidth 开始宽度，以 window.innerHeight 开始高度。

如果您知道两个按钮都占屏幕宽度的 50%，只需将总数除以 2。

if (mouseX < window.innerWidth / 2) {
    // Do stuff for left button
} else {
    // Do stuff for right button
}