Блог

Главная - Вопросы по программированию - HTML DIV не перемещается справа налево по диагонали к концу

HTML DIV не перемещается справа налево по диагонали к концу

#javascript #html #css #animation #css-selectors

#javascript #HTML #css #Анимация #css-селекторы

Вопрос:

       <style>
        #container {
          width: 400px;
          height: 400px;
          position: relative;
          background: rgb(240, 240, 231);
        }
    
        #animate {
          width: 50px;
          height: 50px;
          position: absolute;
          background-color: red;
        }
    
        #animate1 {
          width: 50px;
          height: 50px;
          left: 350px;
          top: 2px;
          position: absolute;
          background-color: rgb(43, 1, 1);
        }
      </style>
  
         <p>
          <button onclick="myMove()">Click Me</button>
        </p>
    
        <div id="container">
          <div id="animate"></div>
          <div id="animate1"></div>
        </div>
    
        <script>
          function myMove() {
            var elem = document.getElementById("animate");
            var elem1 = document.getElementById("animate1");
    
            var pos = 0;
            var pos1 = 0;
            var id = setInterval(frame, 5);
            var id1 = setInterval(frame1, 5);
    
            function frame() {
              if (pos == 350) {
                clearInterval(id);
              } else {
                pos  ;
                elem.style.top = pos   "px";
                elem.style.left = pos   "px";
              }
            }
    
            function frame1() {
              if (pos1 == 350) {
                clearInterval(id1);
              } else {
                pos1  ;
                elem1.style.top = pos1   "px";
                elem1.style.right = pos1   "px";
              }
            }
          }
        </script>

В приведенном выше коде у меня есть 2 куба (div). При нажатии кнопки левый куб должен перемещаться слева направо до конца контейнера по диагонали, а правый куб должен перемещаться справа налево по диагонали до конца контейнера. Но только левый куб перемещается слева направо, а правый куб перемещается сверху вниз. Я хочу, чтобы правый куб перемещался справа налево по диагонали до конца контейнера. И это моя ссылка на песочницу. https://codesandbox.io/s/autumn-sun-uz961?file=/index.html

Ответ №1:

.класс animate1 имеет значение left:350px, сделайте это справа: 0, это будет работать.

 function myMove() {
        var elem = document.getElementById("animate");
        var elem1 = document.getElementById("animate1");

        var pos = 0;
        var pos1 = 0;
        var id = setInterval(frame, 5);
        var id1 = setInterval(frame1, 5);

        function frame() {
          if (pos == 350) {
            clearInterval(id);
          } else {
            pos  ;
            elem.style.top = pos   "px";
            elem.style.left = pos   "px";
          }
        }

        function frame1() {
          if (pos1 == 350) {
            clearInterval(id1);
          } else {
            pos1  ;
            elem1.style.top = pos1   "px";
            elem1.style.right = pos1   "px";
          }
        }
      }  
     #container {
      width: 400px;
      height: 400px;
      position: relative;
      background: rgb(240, 240, 231);
    }

    #animate {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: red;
    }

    #animate1 {
      width: 50px;
      height: 50px;
      right:0px;
      position: absolute;
      background-color: rgb(43, 1, 1);
    }  
 <p>
      <button onclick="myMove()">Click Me</button>
    </p>

    <div id="container">
      <div id="animate"></div>
      <div id="animate1"></div>
    </div>

Ответ №2:

Обновите свой CSS и измените left: 350px; на right: 0px; для #animate1 :

 function myMove() {
  var elem = document.getElementById("animate");
  var elem1 = document.getElementById("animate1");

  var pos = 0;
  var pos1 = 0;
  var id = setInterval(frame, 5);
  var id1 = setInterval(frame1, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos  ;
      elem.style.top = pos   "px";
      elem.style.left = pos   "px";
    }
  }

  function frame1() {
    if (pos1 == 350) {
      clearInterval(id1);
    } else {
      pos1  ;
      elem1.style.top = pos1   "px";
      elem1.style.right = pos1   "px";
    }
  }
}  
 #container {
  width: 400px;
  height: 400px;
  position: relative;
  background: rgb(240, 240, 231);
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

#animate1 {
  width: 50px;
  height: 50px;
  right: 0px; /* instead of right : 350px; */
  top: 2px;
  position: absolute;
  background-color: rgb(43, 1, 1);
}  
 <p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
  <div id="animate1"></div>
</div>

Ответ №3:

Не по теме, но знаете ли вы о переходах CSS?

 function myMove() {
  document.getElementById("animate").classList.toggle("move");
  document.getElementById("animate1").classList.toggle("move");
}

// try clicking the boxes themselves
for (let item of document.querySelectorAll("#animate, #animate1")) {
  item.onclick = function() {
    item.classList.toggle("move");
  }
}  
 #container {
  width: 400px;
  height: 400px;
  position: relative;
  background: rgb(240, 240, 231);
}

#animate {
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  position: absolute;
  background-color: red;
  transition: 3s linear;
}

#animate.move {
  top: 350px;
  left: 350px;
}

#animate1 {
  width: 50px;
  height: 50px;
  right: 0px;
  top: 2px;
  position: absolute;
  background-color: rgb(43, 1, 1);
  transition: 3s linear;
}

#animate1.move {
  top: 350px;
  right: 350px;
}  
 <p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
  <div id="animate1"></div>
</div>