0

間隔を使用して、javascript で 2 つの ID の要素を徐々に増やしようとしています。要素に 2 つの ID を渡します。位置に応じて、要素の幅が位置に依存する方向に徐々に増加するように、条件を記述しようとしています。

渡された要素の位置が oldPosition よりも小さい場合、左の要素を減らし、右の要素を徐々に増やしていきます。渡された要素の位置が oldPosition より大きい場合は逆になります。

これは、修正された私の古い問題の拡張であることに注意してください:)（Javascriptの段階的な幅の増加）

これが得たものです

function grow(elementL, elementR, elementText, position)
{       
    window.loopTimer = setInterval(function() { 
        growInner(elementL, elementR, position); 
        /* fadeOut(elementText);    */
    }, 25);
}

var oldPosition = 0;
function growInner(elementL, elementR, position)
{       
    var htL = parseInt(document.getElementById(elementL).style.width,10);
    var htR = parseInt(document.getElementById(elementR).style.width,10);
    var movementL =0;
    var movementR =0;
    if(position < oldPosition)
    {
        movementL = htL + 10;
        movementR = htR - 10;
    } 
    if(position > oldPosition)
    {
        movementL = htL - 10;
        movementR = htR + 10;
    }

    if(position == 1 && htL < 600 || rtL > 250){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else if(position == 2 && htL < 550  || rtL > 300){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else if(position == 3 && htL < 300  || rtL > 550){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else if(position == 4 && htL < 250  || rtL > 600){
        document.getElementById(elementL).style.width = movementL + 'px';
        document.getElementById(elementR).style.width = movementR + 'px';
        oldPosition = position;
    }
    else{
        clearInterval(loopTimer);
        return false;
    }
}
4

1 に答える 1

0

私の以前のコード位置条件は、クリックされた位置に関して幅の増加方向を正しく考慮していませんでした。変数 documnentGet の呼び出しを減らし、ブール値を返すセキュリティを追加して、前のタイマーが停止するまで別のタイマーを開始できないようにしました。

jsFiddle リンクがありますが、動作していないようです。

http://jsfiddle.net/2mRsG/3/

function moveStart(elementL, elementR, position)
{
    var moveTimer = setInterval(function() { 
        if (!movingProcess(elementL, elementR, position)) {
            clearInterval(moveTimer);
        }
    }, 20);
}

var oldPos = 1;
    function movingProcess(elementL, elementR, position) {
        moving = true;
        var htL = parseInt(document.getElementById(elementL).style.width,10);
        var htR = parseInt(document.getElementById(elementR).style.width,10);
        var left = document.getElementById(elementL);
        var right = document.getElementById(elementR);
        if(position==1){        
            var movementL = htL + 5;
            var movementR = htR - 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementL >= 600 && position==1) 
            {
                oldPos = 1;
                moving = false;
                return false;
            }
        }
        else if(position==2 && oldPos > 2){
            var movementL = htL + 5;
            var movementR = htR - 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementL >= 500) 
            {
                oldPos = 2;
                moving = false;
                return false;
            }
        }
        else if(position==2 && oldPos == 1){        
            var movementL = htL - 5;
            var movementR = htR + 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementR >= 300) 
            {
                oldPos = 2;
                moving = false;
                return false;
            }
        }
        else if(position==3 && oldPos < 3){
            var movementL = htL - 5;
            var movementR = htR + 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementR >= 500) 
            {
                oldPos = 3;
                moving = false;
                return false;
            }
        }
        else if(position==3 && oldPos ==4){
            var movementL = htL + 5;
            var movementR = htR - 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementL >= 300) 
            {
                oldPos = 3;
                moving = false;
                return false;
            }
        }
        else if(position==4){
            var movementL = htL - 5;
            var movementR = htR + 5;
            left.style.width = movementL + 'px';
            right.style.width = movementR + 'px';
            if (movementR >= 600) 
            {
                oldPos = 4;
                moving = false;
                return false;
            }       
        }   
        return true;
    }
于 2013-10-16T09:34:03.697 に答える