使用 JavaScript 和 CSS 使用 2 张图像创建进度条

Creating a Progress bar using 2 images using JavaScript & CSS

本文关键字：使用 创建 图像 JavaScript CSS 张图像      更新时间：2023-09-26

基本上，我想要实现的是使用 2 张图像创建一个进度条式影响。（一个灰度和一个彩色）。尝试将这两个div并排放置，然后动态修改它们的x位置和宽度。但是面对将它们放在一起的问题。我走对了吗？实现这一目标的任何其他方法也受到欢迎。

这将适用于所有浏览器：

.HTML 

<div id="progress-container">
    <span></span>
</div>​

.CSS

#progress-container{
    background: grey; /* default background */
    width: 200px;
    overflow: hidden; /* fit to the height of span */
}
#progress-container span {
    display: block;   /* to enable width and height for this element */
    background: orange;
    height: 15px;
    width: 25%;
}

工作示例：http://jsfiddle.net/ZPffE/2/

<div id="one-hundred">
     <div id="percentage">
     </div>
</div>

尝试像这样组织您的div？

相关文章：