如何更换搬家<img>在使用 JavaScript 的移动过程中与另一个？

Question

I have a moving image that moves across the screen from left to right.我有一个从左到右在屏幕上移动的动态图像。 I need to replace it in the middle of the screen with another image for 5 seconds and then replace it back again resume the movement.我需要在屏幕中间用另一个图像替换它 5 秒钟，然后再次将其替换回来恢复运动。 could anyone please help me with that?有人可以帮我吗？

Here's the code I have so far.这是我到目前为止的代码。 I'm new to this, any help would be very much appreciated !我是新手，任何帮助将不胜感激！ Thanks in advance !提前致谢！

 const catImg = document.querySelector('img'); let marginLeft = (catImg.style.left = 0); let marginRight = catImg.style.right; const body = document.querySelector('body'); body.style.position = 'relative'; function catWalk() { let halfWidth = window.innerWidth / 2 - catImg.width / 2; marginLeft = '0px'; if ( parseInt(window.getComputedStyle(catImg).left) < Math.floor(window.innerWidth / 2 - catImg.width / 2) ) { marginLeft = parseInt(window.getComputedStyle(catImg).left) + 10 + 'px'; catImg.style.left = marginLeft; return; } else if (parseInt(window.getComputedStyle(catImg).left) == Math.round(halfWidth / 10) * 10) { catImg.src = 'https://tenor.com/StFI.gif'; function dancingCat(timePassed) { let startTime, endTime; function start() { startTime = performance.now(); return startTime; } function end() { endTime = performance.now(); timePassed = endTime - startTime; console.log(timePassed); return endTime; } if (timePassed == 5000) { catImg.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; } } } else if ( parseFloat(window.getComputedStyle(catImg).left) > window.innerWidth - catImg.width / 2 ) { console.log('stop here'); catImg.style.left = '0px'; return; } return; } setInterval(catWalk, 50); catWalk();

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Cat Walk</title> </head> <body> <img style="position; absolute:" src="http.//www.anniemation.com/clip_art/images/cat-walk.gif" /> <script src="ex5-catWalk.js"></script> </body> </html>

Answer 1

Based on your code I made a refactor separating each sentence between functions.根据您的代码，我对函数之间的每个句子进行了重构。 BTW, try to avoid declare functions within functions.顺便说一句，尽量避免在函数中声明函数。 I'm giving you just an example of how can you make it.我只是给你一个例子，说明你如何做到这一点。 I'm sure it could be better turning each function as pure, but it works fine.我敢肯定，将每个 function 都变成纯色会更好，但效果很好。

Edition版

Adding some lines to start function you can achieve a loop cycle when the cat overflows the right side window.加几行start function就可以实现猫溢出右边window时的循环循环。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Cat Walk</title>
</head>

<body>
  <img width="200" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />

  <script type="text/javascript">

    let interval, leftPos = 0, stopped = 0;

    const img = document.querySelector('img');
    const windowHalf = window.innerWidth / 2;
    const middlePos = windowHalf - img.width / 2;

    function step(img, size) {
      leftPos += size;
      return img.style.marginLeft = leftPos + 'px';
    }

    function start() {
      interval = setInterval(() => {
        if (leftPos < window.innerWidth) {
          if (leftPos < middlePos || stopped) {
            return step(img, 5);
          } else {
            clearInterval(interval);
            return stop();
          }
        } else {
          // restart variables when cat overflows window area
          leftPos = 0;
          stopped = 0;
        }
      }, 50)
    }

    function stop() {
      img.src = 'https://tenor.com/StFI.gif';
      stopped++
      setTimeout(() => {
        img.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
        start()
      }, 5000)
    }

    start();
  </script>
</body>

</html>

如何更换搬家<img>在使用 JavaScript 的移动过程中与另一个？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-08 14:05:47

如何更换搬家<img>在使用 JavaScript 的移动过程中与另一个？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-08 14:05:47

解决方案1
1 已采纳 2020-08-08 14:05:47