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関数の[]値を返すためのピースが欠けていると思いますが、それを機能させる方法がわかりません。右に移動したら、同じ原則を適用してマウスアウトに戻すことができます。

誰かが私がこれを修正するのを手伝ってくれるなら、それは素晴らしいことです。ライブラリを使用せずに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を使い続けたい場合は、最初の1つに近づいています。ハードコードされた数値を変数に移動しました。

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 に答える