1
Я хочу, чтобы изображение остановилось, если оно попало в край экрана, но вместо этого оно продолжается бесконечно (или пока оно не сработает) и появится полоса прокрутки.Как мне получить изображение, чтобы остановить перемещение, когда оно попадает на край веб-страницы?
Я попытался установить его, чтобы остановить его, если правая сторона изображения должна быть ниже, чем ширина клиента, но по какой-то причине не регистрируется как жизнеспособная команда.
Другими словами, как мне распознать изображение, когда оно попало в край браузера?
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. да, я знаю, что много этого кода неряшливо. Сожалею.
Не могли бы вы также добавить HTML? Это может помочь. – s3lph
Да одна секунда :) – TandyRayes
Этот пример не работает, он включает JS из внешнего скрипта. Создайте [SSCCE] (http://sscce.org/) и добавьте его, используя функцию фрагмента из редактора вопросов SO. – s3lph