Question

我想要在屏幕上移动3张图像（汽车）。当我点击“开始”按钮时，相关的汽车应该在屏幕上移动。 Car1，Car2和Car3。每个按钮需要激活三个不同的计时器事件。每辆车都应使用“margin-left”样式属性移动，同时将距离参数增加一个行进的像素数。

我也想要一个胜利者。无论哪辆车穿过或重叠已检查的图像，都应显示一个警告框，指示获胜者并停止所有计时器。

这就是我到目前为止：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to div races!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .style1
    {
        width: 134px;
        height: 51px;
    }
</style>
</head>

<body>

<div id="header">Div Races!</div>

<div id="track">

<div class="lane"><div id="Car1">
  <img id="Car1" alt="Car1" class="style1" longdesc="Car1" 
      src="Car1.jpg" /></div></div><!--Car1-->
<button onclick="Car1()">Start</button>

<div class="lane"><div id="Car2">
  <img id="Car2" alt="Car2" class="style1" longdesc="Car2" 
      src="Car2.jpg" /></div></div><!--Car2-->
<button onclick="Car2()">Start</button>

<div class="lane"><div id="Car3">
  <img id="Car3" alt="Car3" class="style1" longdesc="Car3" 
      src="Car3.jpg" /></div></div><!--Crankshaft-->
<button onclick="Car3()">Start</button>

</div><!--track-->

<div id="footer">Click on a start button to start a racecar!</div>

</body>
</html>




function Car1() {
var animate, left = 0, imgObj = null;
init();
    function init(){

       imgObj = document.getElementById('rusty');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';

       moveRight();
    }

    function moveRight(){
        left = parseInt(imgObj.style.left, 10);

        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';

            animate = setTimeout(function(){moveRight();},20); 

            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }

    function stop(){
       clearTimeout(animate);
    }

window.onload = function() {init();};
}

function Car2() {
var animate, left = 0, imgObj = null;
init();
    function init(){

       imgObj = document.getElementById('dusty');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';

       moveRight();
    }

    function moveRight(){
        left = parseInt(imgObj.style.left, 10);

        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';

            animate = setTimeout(function(){moveRight();},20); 

            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }

    function stop(){
       clearTimeout(animate);
    }

window.onload = function() {init();};
}

function Car3() {
var animate, left = 0, imgObj = null;
init();
    function init(){

       imgObj = document.getElementById('crankshaft');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';

       moveRight();
    }

    function moveRight(){
        left = parseInt(imgObj.style.left, 10);

        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';

            animate = setTimeout(function(){moveRight();},20); 

            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }

    function stop(){
       clearTimeout(animate);
    }

window.onload = function() {init();};
}

我是否在正确的轨道上？我使用的代码在网站上找到。任何建议都将不胜感激。

使用javascript从左向右移动（滑动）3个不同的图像

0 个答案: