Javascript Код конфликтует

Question

var img = document.getElementsByTagName('img')[0]; //This is our image
img.style.left = '0px'; // Making the image's style "left:0px";
var catWalk = function() { //Assigning function
  if (parseInt(img.style.left) <= 1240) { //This code makes cat walk straight while image's style 'left' is lower than 1240
    img.style.transform = 'scale(1,1)';
    var oldLeft = parseInt(img.style.left);
    var newLeft = oldLeft + 7;
    img.style.left = newLeft + 'px';
  } else if (parseInt(img.style.left) >= 1240) { //This code makes cat walk back when image's style 'left' if bigger than 1240
    // clearInterval(positioning);
    img.style.transform = 'scale(-1, 1)';
    var oldLeft = parseInt(img.style.left);
    var newLeft = oldLeft - 7;
    img.style.left = newLeft + 'px';
  }
}
positioning = window.setInterval(catWalk, 10);

<img src="http://www.anniemation.com/clip_art/images/cat-walk.gif" alt="Cat walks" style=" position:absolute;">

Там есть кот, он должен ходить туда-сюда. Но код конфликтует с самим собой. Помогите пожалуйста. П.С : Я новичок.

Answer 1

Введите дополнительную переменную для хранения направления кота. Это избавит от дублирования кода. Если кот выходит из разрешенного ему интервала, то меняем направление.

В вашем случае он обратно не идет, потому что как только он пересекает границу (когда уже обратно идет), начинает срабатывать первая ветвь цикла.

var img = document.getElementsByTagName('img')[0];
img.style.left = '0px'; 

let sign = 1; // переменная для хранения знака

var catWalk = function() { 

  img.style.transform = `scale(${sign},1)`;
  
  var oldLeft = parseInt(img.style.left);
  var newLeft = oldLeft + 4 * sign;
  img.style.left = newLeft + 'px';
  
  if (parseInt(img.style.left) > 440 || parseInt(img.style.left) < 0) {
    sign *= -1; // меняем направление коту
  }
}
positioning = window.setInterval(catWalk, 10);

<img src="http://www.anniemation.com/clip_art/images/cat-walk.gif" alt="Cat walks" style=" position:absolute;">

БЛОГ НА HUSL

Javascript Код конфликтует

Ответы (1 шт):