2

我有一个按钮和鼠标悬停，我希望它以 10 像素的速度向右移动 100 像素然后停止。移动不是问题，它是停止。我可以用 jquery 做到这一点，但我需要学习如何在 javascript 中从头开始。这是我到目前为止的脚本。

function rollRight() {      
    imgThumb.style.left = parseInt (imgThumb.style.left) + 10 + 'px';
    animate = setTimeout(rollRight,20);
}

这让它移动得很好，所以为了阻止它，我尝试将循环数量 5x10=50px 并再次写为

function rollRight() {
    var i=0;
    while (i < 5) {     
    imgThumb.style.left = parseInt (imgThumb.style.left) + 10 + 'px';
    animate = setTimeout(rollRight,20);
    i++;
    };
}

现在，我想我错过了让它返回 while 函数的 [] 值的部分，但我不确定如何让它工作。一旦我有正确的移动，我可以应用相同的原则将它移回onmouseout。

如果有人可以帮我解决这个问题，那就太好了。如果你有一个更好的脚本来做动画，只是 javascript，没有库，那也很好。

编辑：因为将其作为评论保留效果不佳，这是我当前的代码

function rollRight() {   
    var left = parseInt (imgThumb.style.left);
    if(left < 50) { // or any other value   
    imgThumb.style.left = left + 10 + 'px';
    animate = setTimeout(rollRight,20);
    }
}

function revert() {   
    var left = parseInt (imgThumb.style.left);
    if(left < 50) { // or any other value   
    imgThumb.style.left = left + -10 + 'px';
    animate = setTimeout(rollRight,20);
    }
}

在还原中，我无法将其移回。它可能在 if(left<50) 部分。

4

3 回答 3

0 
var animate = null;

function rollRight() { 
    if(animate) clearTimeout(animate);  
    var left = parseInt (imgThumb.style.left);
    if(left < 50) { // or any other value   
        imgThumb.style.left = left + 10 + 'px';
        animate = setTimeout(rollRight,20);
   }
}

function revert() {
    if(animate) clearTimeout(animate);
    var left = parseInt (imgThumb.style.left);
    if(left > 0) {
        imgThumb.style.left = (left - 10) + 'px';
        animate = setTimeout(revert,20); 
    }
}
于 2012-10-31T22:48:46.963 回答
0

如果您想坚持使用 setTimeout，那么您就已经接近第一个了。我将一些硬编码的数字移动到变量中：

var totalPixels = 100;
var increment = 10;
var frameTime = 20;
var numFrames = totalPixels / increment;
var curFrame = 0;

function rollRight() {      
    imgThumb.style.left = parseInt (imgThumb.style.left) + increment + 'px';

    if(curFrame++ < numFrames) {
        animate = setTimeout(rollRight,frameTime);
    }
}

您也可以切换到使用 setInterval ，然后每次触发间隔时，根据一些递增值决定是否应该停止间隔。

于 2012-10-31T22:49:02.770 回答
-1

尝试这个

var i = 0;
var moveInterval = setInterval(function(){
    if(i>=5) clearInterval(moveInterval);       
    rollRight();
    i++;
},20);

function rollRight() {      
    imgThumb.style.left = parseInt (imgThumb.style.left) + 10 + 'px';
}

一旦达到5，它将清除间隔，并完成。

于 2012-10-31T22:46:51.323 回答