Question

我看到一个网站，在它的加载时间内，图像从左到右显示为进度条！在它下面是一个百分比的柜台。

整个图像的位置是白色的，在加载时间内，图像从左到右显示为进度条。

他们怎么能这样做？我认为很好，并搜索网络，但该网站我忘了在哪里看到代码。有谁知道怎么做？

Answer 1

假设您知道进度值何时发生变化，您只需在每次进度更改时更改图像的宽度（在本例中为容器div）。

<body>
    <div style="width:200px"> 
        <div id="test" style="width:20%; overflow:hidden;">
            <img src="http://cdn-careers.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png" alt=""/>
        </div>
    </div>
</body>

$(function() {
       $('#test').css('width','50%');
});

请看这里的小提琴： http://jsfiddle.net/6wtFx/

完成图像作为进度条

1 个答案: