Question

我是javascript的新手。我正在尝试创建一个小动画。我有一张背景图片，我已将图像准确放置在我想要的背景图像上（让我们称这个图像为＆＃39;公主＆＃39;。

我想要的是公主移动到背景中的某个点（根据像素x＆amp; y值）。

到目前为止，使用下面的代码，Princess会移动，但不会停止。我试图找到解决方案时遇到clearTimeOut（）函数，但有没有办法阻止某个像素点的移动？

这是我到目前为止的代码。提前谢谢你：）

var imgObj = null;

function init(){
imgObj = document.getElementById('princess');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px'; 
moveRight();
}


function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
timer = setTimeout(moveRight, 150);
}


window.onload = init;

Answer 1

像这样：

function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
timer = setInterval(moveRight, 150);
if(parseInt(imgObj.style.left) > 100){
clearInterval(timer);
}

请改用setInterval和clearInterval。

Answer 2

您可以检查功能moveRight和clearTimeout，如下面的

function moveRight(){
    imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
    timer = setInterval(moveRight, 150);
    if(imgObj.style.left === '50px'){
      clearInterval(timer);
    }
}

我认为setInterval＆amp; clearInterval符合最佳要求。

喜欢吼叫

<script>
    var imgObj = null;
    var interval;

        function init(){
        imgObj = document.getElementById('princess');
        imgObj.style.position= 'relative'; 
        imgObj.style.left = '0px'; 
        interval = setInterval(moveRight, 150);
        }


        function moveRight(){
        imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
        if(imgObj.style.left === '50px')
            clearInterval(interval)
        }
        window.onload = init;
</script>

Answer 3

我认为setInterval更适合这种情况，moveRight并不表示它会停在指定位置。

对于条件部分，您需要将实际位置与给定限制进行比较。

也许这样的事情会更容易维护。试试这个：

var DX=10;
var DELAY_MS=150;

function moveRightTo(limitX) {
    move(DX,0); // move X by 10
    var x = setInterval(function(){
        var posX = parseInt(imgObj.style.left);
        if (posX < limitX)
            move(DX,0);
        else
            clearInterval(x);
    }, DELAY_MS);
}

function move(x, y) {
    var posX = parseInt(imgObj.style.left);
    imgObj.style.left = (posX+x) + "px";

    // var posY = parseInt(imgObj.style.top);
    // imgObj.style.top = (posY+y) + "px";
}

用法：

function init() {
    // ...
    moveRightTo(150);
    // moveLeftTo(25) ?
    // moveDownTo(200) ?
}

Javascript中的一个小动画

3 个答案: