0

我正在尝试使用间隔逐渐增加 javascript 中 2 个 id 的元素。我为元素传递了两个 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 回答