Question

我会让代码说明一切。

我希望能够拥有两个图像/徽标，这两个图像/徽标的颜色不同，并且可以调整其中一个图像的宽度，使徽标看起来正在改变颜色。我有一些有用的东西，只是它在从右到左的方向上起作用。我希望它从左到右。

<div id="outer">
<span id="img_black"></span>
<span id="img_blue"></span>
</div>

#img_black {
    width : 800px;
    height : 250px;
    position : absolute;
    float : left;
    background-color : black;
}


#img_blue {
    width : 800px;
    height : 250px;
    position : absolute;
    float : right;
    background-image : url('http://d1fzn3ba6zmp2v.cloudfront.net/images/go%20green%20(800x250).jpg');
}


#outer {
width : 800px;
height : 250px;
}


var curr_width = 800;

function setWidth() {
    document.getElementById("img_blue").style.width = (curr_width + 'px').toString();
    console.log("width" + curr_width);
    curr_width--;
    if (curr_width > 0) {
        setTimeout(setWidth, 10)
    }
}

setWidth();

为了证明我使用了图片和颜色填充，颜色从右到左填充。我需要从左到右，同时保持图片静止（它不会移位）

这个从左到右做，但画面改变了。我希望能够保持画面静止。 http://jsfiddle.net/Ym7Ex/2/

帮助表示赞赏。

Answer 1

当前代码将宽度从800调整为0像素。而是将其更改为0到800像素，如下所示。

var curr_width = 0; //modified this

function setWidth() {
    document.getElementById("img_blue").style.width = (curr_width + 'px').toString();
    console.log("width" + curr_width);
    curr_width++; // and this
    if (curr_width < 800) { //and this.
        setTimeout(setWidth, 10)
    }
}

setWidth();

Demo Fiddle

将元素固定在右边并减小左边的宽度 - ＆gt;正确的方向

1 个答案: