Question

如果图像碰到屏幕边缘，我希望图像停止，但它会无限期地（或直到它崩溃）并使滚动条出现。

我已经尝试将其设置为停止，因为图像的右侧必须低于客户端的宽度，但出于某种原因，这并未注册为可行的命令。

换句话说，如何在图像到达浏览器边缘时识别图像？

HTML ：

<!DOCTYPE html>
<html>
<head>
<h1> ----'s Door prize </h1>
</head>
<body>
<script src="doorprize.js"></script>
<div id="d1" style ="display:inline">
    <h3 style= "font-size:24px;" ><b> Enter Names </b></h3></br>
    <textarea style="margin: 0px; height: 347px; width: 327px;" id="contestantField"></textarea></br>
    <button id="chooseNames">Choose your Participants</button>
</div>
<div id="d2" style="display:none">
    <h3 id="onYourMarks"> Contestants </h3>
    <img src="BlueToad.png" style="position:relative; left: 10px;width:75px;height:75px;display:none" id="img0"></img><p id="name0"></p></br>
    <img src="Luigi-Nintendo.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img1"></img><p id="name1"></p></br>
    <img src="Wario_Real.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img2"></img><p id="name2"></p></br>
    <img src="Shadow-large.png" style="position:relative; left: 10px;width:75px;height:75px;display:none" id="img3"></img><p id="name3"></p></br>
    <img src="NsmbMario.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img4"></img><p id="name4"></p></br>
    <img src="Nabbit.png" style="position:relative; left: 10px;width:75px;height:75px;display:none"id="img5"></img><p id="name5"></p></br>
    <button id="Race">RACE!</button>
    <button id="CancelIt">Cancel</button>
    <audio id="chariotsOfFire">
        <source src="chariots.mp3" type ="audio/mpeg">
    </audio>

</div>
<div id="d3" style="display:none">
    <p> Congratulations! </p> <p id="winner"></p>
    <img id="winner">
    <button id="newRace">Try Again?</button>

</body>
</html>

使用Javascript：

var Go;
var img0 = new Image();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
var img4 = new Image();
var img5 = new Image();
var imgArray = new Array();
function waitForIt()
{
    document.getElementById("onYourMarks").innerHTML = "Get Ready!...Set!";
    document.getElementById("Race").style.display = "none";
    for(i=0;i<6;i++)
    {
        document.getElementById("name" + i).innerHTML = "";
    }
    var waitForIt = setTimeout(startRacing, 2000);
    window.addEventListener("load",startRacing);
}
function moveThatImage()
{

    img0 = document.getElementById("img0");
    img1 = document.getElementById("img1");
    img2 = document.getElementById("img2");
    img3 = document.getElementById("img3");
    img4 = document.getElementById("img4");
    img5 = document.getElementById("img5");
    imgArray[0] = img0;
    imgArray[1] = img1;
    imgArray[2] = img2;
    imgArray[3] = img3;
    imgArray[4] = img4;
    imgArray[5] = img5;
    for(i=0;i<imgArray.length;i++)
    {
        var left = parseInt(imgArray[i].style.left,imgArray[i].style.left);
        console.log(left);
        left += Math.floor((Math.random() * 10 + 1));
        imgArray[i].style.left = left + 'px';
    }
}

function startRacing()
{
    img0 = document.getElementById("img0");
    img1 = document.getElementById("img1");
    img2 = document.getElementById("img2");
    img3 = document.getElementById("img3");
    img4 = document.getElementById("img4");
    img5 = document.getElementById("img5");
    imgArray[0] = img0;
    imgArray[1] = img1;
    imgArray[2] = img2;
    imgArray[3] = img3;
    imgArray[4] = img4;
    imgArray[5] = img5;
    document.getElementById("onYourMarks").innerHTML = "GOOOOOO!!!!!!";
    var audio = document.getElementById("chariotsOfFire");
    audio.play();
    var width = document.documentElement.clientWidth;
    console.log(width);
    console.log(imgArray[1].style.length);
    for(i=0;i<imgArray.length;i++)
    {
        console.log(i);
        while(imgArray[i].style.left < width)
        {
        Go = setInterval(moveThatImage,2);
        }
    }
    clearInterval(Go);
}

function raceOver()
{
    document.getElementById("d2").style.display = "none";
    document.getElementById("d3").style.display = "block";

}

P.S。是的，我知道很多这段代码都很草率。遗憾。

Answer 1

window.innerWidth会告诉你窗口的宽度。您可以检查并查看窗口的宽度是否小于或等于迭代左侧的当前图像加上其宽度，然后在这种情况下停止。这将处理图像从左向右移动的情况，正如您的代码似乎表明的那样。

如何让图像在到达网页边缘时停止移动？

1 个答案: