JavaScript анимация прокрутки вверх и вниз - PullRequest
Новая
       1

JavaScript анимация прокрутки вверх и вниз

0 голосов
/ 08 июня 2018

Как сделать так, чтобы анимация JavaScript прокручивалась как вниз, так и обратно вверх?Я все еще изучаю JavaScript и нашел пример кода от w3schools, который, когда я изменил его, чтобы прокрутить вверх, работал в редакторе Tryit, используя точно такой же код для функции myUP, которую я описал ниже.Хотя я знаю, что в его текущем состоянии, в сочетании с другой функцией, тот же самый код в настоящее время не работает.

Я догадываюсь, что в коде было что-то плохое, даже когда он работал нормально сам по себев редакторе Tryit.Я чувствую, что в будущем это не будет работать должным образом.Правильно ли я предполагаю это, и, если да, что мне следует делать, чтобы достичь этого в JavaScript вместо этого? 

<html>
<style>
#myContainer {
  width: 500px;
  height: 500px;
  position: relative;
  background: black;
}
#tester {
  width: 500px;
  height: 50px;
  position: absolute;
  background-color: gray;
}
</style>
<body>

<p>
<button onmousedown="myMove()">DOWN</button> 
</p>
<p>
<button onmousedown="myUP()">UP</button> 
</p>

<div id ="myContainer">
<div id ="tester"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("tester");   
  var pos = 0;
  var id = setInterval(frame, 20);
  function frame() {
    if (pos == 500) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
     
    }
  }
}

function myUP() {
  var elem = document.getElementById("tester");   
  var pos = 0;
  var id = setInterval(frame, 20);
  function frame() {
    if (pos == 500) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.bottom = pos + 'px'; 
       
    }
  }
}

   

  
</script>

</body>

1 Ответ

0 голосов
/ 08 июня 2018

Проверьте рабочий код сейчас,

Ваш код создавал проблему в функции UP. 

function myUP() {
  var elem = document.getElementById("tester");   
  var pos = 500;// Changed the max position.
  var id = setInterval(frame, 20);
  function frame() {
    console.log(pos);
    if (pos == 0) { //reverse condition to 0
      clearInterval(id);
    } else {
      pos--; // reverse the position
      elem.style.top = pos + 'px'; // that should be back to top

    }
  }
}


<html>
<style>
#myContainer {
  width: 500px;
  height: 500px;
  position: relative;
  background: black;
}
#tester {
  width: 500px;
  height: 50px;
  position: absolute;
  background-color: gray;
}
</style>
<body>

<p>
<button onmousedown="myMove()">DOWN</button> 
</p>
<p>
<button onmousedown="myUP()">UP</button> 
</p>


<div id ="myContainer">
<div id ="tester"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("tester");   
  var pos = 0;
  var id = setInterval(frame, 20);
  function frame() {
    if (pos == 500) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
     
    }
  }
}
function myUP() {
  var elem = document.getElementById("tester");   
  var pos = 500;
  var id = setInterval(frame, 5);
  function frame() {
    console.log(pos);
    if (pos == 0) {
      clearInterval(id);
    } else {
      pos--; 
      elem.style.top = pos + 'px'; 
       
    }
  }
}

   

  
</script>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...