窗口.JavaScript中的innerWidth

window.innerWidth in JavaScript

本文关键字：innerWidth 中的 JavaScript 窗口      更新时间：2023-09-26

下面是我的代码:

<body>
    <header></header>
    <div id="slider" class="slider">
        <p>Slider content</p>
    </div>
    <script src="jas.js"></script>
</body>



var divPos = 50;
var direction = "L";
function preparepage() {
    document.getElementById("slider").style.position = "absolute";
    document.getElementById("slider").style.left = divPos + "px";
    document.getElementById("slider").style.top = "50px";
    animateDiv = setInterval(beginAnimate,50);
}
function beginAnimate () {
    if (direction == "L") {
        divPos+=50;
        if (divPos == 1300) {
            direction = "R";
        }
    } else if (direction == "R"){
        divPos-=50;
        if (divPos == 150) {
            direction = "L";
        }
    }
    document.getElementById("slider").style.left = divPos + "px";
}
window.onload = function () {
    setTimeout(preparepage,200);
};

我想让#slider从左向右移动，当它到达某个点时返回。我的代码工作得很好，但我尝试这样做:

if (direction == "L") {
    divPos+=50;
    if (divPos == window.innerWidth - 300) {
        direction = "R";
    }
}

永远向左。为什么会这样呢?我怎么做才能让它回到某个点，屏幕分辨率是多少?

使用说明:

if (divPos > window.innerWidth - 300) {

除非窗口的宽度是50的倍数，否则将divPos增加50不会精确地达到innerWidth - 300，因此您需要不那么精确。

相关文章：