Question

我受到了一个网站的挑战，该网站要求我让两个图像在屏幕上随机竞赛到终点线。我需要使用JavaScript来实现这一点。不幸的是，我在这里遇到了一些麻烦。

我有一个脚本允许div容器和一个对象“animate”（这是一个小方块）在屏幕上向右移动，就像我应该做的那样。尝试对两个不同的图像进行此操作时，我的问题就出现了。

我的目标是让我创建的动画应用于图像，我无法弄清楚如何将这些功能应用到已经放置在页面上的图像，使它看起来好像是在随机的时间间隔内竞争页面到终点。

我理解动画的概念及其背后的JavaScript，我只是不明白如何将其应用于图像，以及超过1张图像。

请告知。

这是我正在使用的代码：你可以看到我在页面上留下了我的演示动画，以及我希望将它应用到的两个图像。

function myMove() 
{
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() 
  {
    if (pos == 350) 
    {
      clearInterval(id);
    } 
    else 
    {
      pos++; 
      elem.style.left = pos + 'px'; 
    }
  }
}

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="yeildLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

<style>
  body {
    overflow: hidden;
  }

  #bluefish {
    position: absolute;
    top: 31pc;
    width: 17pc;
    left: -.5pc;
  }

  #turtle {
    position: absolute;
    width: 15pc;
    top: 20pc;
  }

  body {
    background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
  }

  .finishline {
    position: absolute;
    right: -12pc;
    top: 18pc;
  }

  #traffic-light {
    height: 10pc;
    width: 4pc;
    background-color: #333;
    border-radius: 20pc;
    position: absolute;
  }

  .bulb {
    height: 2pc;
    width: 2pc;
    background-color: #111;
    border-radius: 50%;
    margin: 15px auto;
    transition: background 500ms;
  }

  #container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
</div>

Answer 1

试试这个：

＆＃13;

function myMove() 
{
  var elemBluefish = document.getElementById("bluefish");
  var elemBluefishWin = document.getElementById("bluefishwin");
  var elemTurtle = document.getElementById("turtle");
  var elemTurtleWin = document.getElementById("turtlewin");
  
  var posBluefish = 0;
  var posTurtle = 0;

  var hasWinner = false;
  elemBluefishWin.style.display = 'none';
  elemTurtleWin.style.display = 'none';
  
  var id = setInterval(frame, 5);
  function frame()
  {
    if(posBluefish >= 350 && posTurtle >= 350)
    {
      clearInterval(id);
      return;
    }

    if(posBluefish < 350)
    {
      posBluefish += Math.round(Math.random()*10);
      if(posBluefish >= 350)
      {
        posBluefish = 350;
        if(!hasWinner){
          hasWinner = true;
          elemBluefishWin.style.display = 'unset';
        }
      }
      elemBluefish.style.left = posBluefish + 'px';
    }

    if(posTurtle < 350)
    {
      posTurtle += Math.round(Math.random()*10);
      if(posTurtle >= 350)
      {
        posTurtle = 350;
        if(!hasWinner){
          hasWinner = true;
          elemTurtleWin.style.display = 'unset';
        }
      }
      elemTurtle.style.left = posTurtle + 'px';
    }
  }
}

＆＃13;

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="yeildLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

<style>
  body {
    overflow: hidden;
  }

  #bluefish {
    position: absolute;
    top: 31pc;
    width: 17pc;
    left: -.5pc;
  }

  #turtle {
    position: absolute;
    width: 15pc;
    top: 20pc;
  }
  
  #bluefishwin {
    position: absolute;
    right: 1pc;
    top: 31pc;
    display: none;
  }
  
  #turtlewin {
    position: absolute;
    right: 1pc;
    top: 20pc;
    display: none;
  }

  body {
    background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
  }

  .finishline {
    position: absolute;
    right: -12pc;
    top: 18pc;
  }

  #traffic-light {
    height: 10pc;
    width: 4pc;
    background-color: #333;
    border-radius: 20pc;
    position: absolute;
  }

  .bulb {
    height: 2pc;
    width: 2pc;
    background-color: #111;
    border-radius: 50%;
    margin: 15px auto;
    transition: background 500ms;
  }

  /*#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }*/
</style>

<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">

<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">

<p>
  <button onclick="myMove()">Click Me</button>
</p>

<div id="container">
  <div id="animate"></div>
</div>

＆＃13;

它为每个图像获取一个元素，并为每个图像位置每5ms增加一个随机数量的像素（0到9之间）。如果两个＆＃34;赛车手＆＃34;达到目标（350px）时，间隔被清除，比赛结束。获胜者将获得在终点线上显示的图像。

Answer 2

function mover(obj) { 
this.obj=obj;
this.pos = 0; 
this.id = setInterval(this.frame, 5);   
} 
mover.prototype.frame=function() { 
 if (this.pos == 350) { 
clearInterval(this.id); 
} else { 
this.pos++; 
this.obj.style.left = this.pos + 'px'; 
} 
} 
}

简单地说：

img1=new mover(document.getElementById("pic1"));

您可以对每个图像重复此操作，然后将它们存储到数组中：

images=[]; 
function letsmove(){
images.push(new mover(someid));
...
}

您可以对网站上的所有图片执行此操作：

images=[]; 
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}

有关更多说明，请参阅JS OOP和JS Prototyping

Answer 3

一个例子：

＆＃13;

function startRace() {
  animateRacer("player1", true);
  animateRacer("player2", true);
}

function animateRacer(playerId, reset) {
  var elem = document.getElementById(playerId);
  var pos = parseInt(elem.style.left, 10);
  if (isNaN(pos) || reset) {
    pos = 0;
  }
  //console.log(playerId + ': ' + pos);

  if (pos < 450) {
    pos += randStep(3);
    elem.style.left = pos + 'px';
    setTimeout('animateRacer("' + playerId + '")', randStep(5));
  }
}

function randStep(max) {
  var min = 1;
  return Math.floor(Math.random() * (max - min)) + min;
}

＆＃13;

body {
  overflow: hidden;
}

#container {
  width: 500px;
  height: 160px;
  position: relative;
  background-color: yellow;
}

.player {
  width: 50px;
  height: 50px;
  background-color: gray;
  position: relative;
}

#player1 {
  background-color: red;
  top: 20px;
}
#player2 {
  background-color: blue;
  top: 40px;
}

＆＃13;

<p>
  <button onclick="startRace()">Start Race</button>
</p>

<div id="container">
  <div id="player1" class="player"></div>
  <div id="player2" class="player"></div>
</div>

＆＃13;

如何使用JavaScript在屏幕上移动两个不同的图像

3 个答案: