Html 扩展GIF图像而不丢失其动态特性

我有一个名为Progressbar.gif的图像，它是一个动态图像，它是一个向前移动的进度条。图像的宽度为489像素，我想增加图像的宽度而不丢失其动态属性，即我不想将图像转换为静态图像。因此，如果有人可以向我推荐我可以学习的任何链接，或者如果有人可以将他/她的学习经历放入其中，那么他/她将非常受欢迎。

听起来你想这样做使用全长动画进度条图像显示进度。实现这一点的一个好方法是在周围的div上应用overflow-x:hidden，然后动态地操纵该元素的宽度。CSS overflow-x属性控制在无法显示元素的完整内容时是否显示滚动条。它默认为“可见”，始终显示被遮挡的内容

由于内容不会像预期的那样围绕进度条流动，因此您可能希望将其包装在宽度等于图像宽度100%的容器元素中。不幸的是，这必须手动设置

下面是一个示例JSFIDLE：

HTML是：

<div class="container">
    <div class="mask">
        <img src="http://www.edufunstore.com/img/progressBar.gif" />
    </div>
</div>

以及一些示例Javascript，以使其移动并演示如何操作div.mask元素：

$(document).ready(function() {
    var progress = 0;
    var timer;
    var initialWidth = $('div.container').width();

    $('div.mask').css('width', '0px');

    timer = setInterval(function() {
        if (progress >= 1) {
             clearInterval(timer);   
        }

        progress += 0.1;
        $('div.mask').css('width', progress*initialWidth+'px');

    }, 1000);
});

---

谢谢……我知道你告诉我我已经试过了。我的问题实际上是容器div的大小是610px，progress.gif图像的大小是489px。我正在根据用户填写的数据增加progress.gif图像。但在本例中，当progressbar.gif完全显示100%后，div中仍有一些空间，因为div大小大于progress.gif。那么，我有没有办法将图像宽度从489px增加到610px，而不丢失它的gif属性……当然，你可以拉伸图像，但会有明显的副作用。你可以做一些更疯狂的涉及CSS边框图像的事情，但是很难让动画对齐，因为你的进度条图像会被渲染多次以达到效果。不过，最好是将你的宽度与你拥有的图像相匹配。

$(document).ready(function() {
    var progress = 0;
    var timer;
    var initialWidth = $('div.container').width();

    $('div.mask').css('width', '0px');

    timer = setInterval(function() {
        if (progress >= 1) {
             clearInterval(timer);   
        }

        progress += 0.1;
        $('div.mask').css('width', progress*initialWidth+'px');

    }, 1000);
});