Question

我有一个名为Progressbar.gif的图像，它是一个动态图像（它是一个向前移动的进度条）。图像的大小是489像素（宽度），我想增加图像的宽度，而不会失去其动态属性，即我不想将图像转换为静态图像。所以，如果有人可以建议我从哪里可以链接学习或者如果有人能够提供他/她的学习经历那么他/她就会受到欢迎。

Answer 1

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

由于内容不会按预期在进度条上流动，因此您可能希望将其包装在“container”元素中，该元素的宽度等于图像宽度的100％。不幸的是，这必须手动设置。

以下是jsFiddle示例：

http://jsfiddle.net/K8sFM/1/

HTML是：

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

CSS：

div.mask {
    overflow-x:hidden;
    display:inline-block;
}

div.container {
    width: 257px;
    border-radius:5px;
    border:1px solid #ccc;
}

一些示例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);
});

扩展GIF图像而不会丢失其动态属性

1 个答案: