使用JavaScript和&amp ;;使用2个图像创建进度条。 CSS

时间:2012-06-08 03:55:19

标签: javascript html css

基本上我想要实现的是创建一个使用2个图像的进度条。 (一个灰度和一个彩色)。试图将这两个div放在一起并放在一起然后动态修改这些x位置和宽度。但面临问题,把它们放在一起。我会采用正确的方法吗?任何其他实现这一目标的方法也是受欢迎的。

2 个答案:

答案 0 :(得分:1)

这适用于所有浏览器:

<强> 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/

答案 1 :(得分:0)

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

尝试像这样组织你的div?