这种h5的百分比进度条如何实现

Question

手机页面REM布局? 这种效果如何实现？创建一个长条 覆盖在上边吗

Answer 1

左右圆角矩形，中间背景为橙色的长方矩形，红色百分比的长度定位在中间的矩形left，根据数据改变红色百分比长度

Answer 2

实践思路

两种解决方案，简单和繁琐。

1. 一个背景图片，用定位来显示百分比。

2. 左右写两个盒子。

代码思路

第一种：
给父级加个定位position: relative;
在加一个背景颜色。用css3-moz-linear-gradient
样例：background: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */
给每个span都分别定位position: absolute;定位按照设计图走。
每个span都不要背景颜色。

另外我span的命名都是瞎起的，你运用到自己的项目中，要起含义一致的。
其他的，我觉得就是ajax请求，并把获得的数据覆盖上。

关于百分比的参数，你可以跟后台沟通，可以直接让他把对应的值告诉你，你在把获取的值，拼到样式里。这个就需要你跟后台人员对接了。

<div>
    <div>
        <span class="floatL">购买支持</span>
        <span class="leftNum">60%</span>
        <span class="rightNum">40%</span>
        <span class="floatR">购买支持</span>
        <div class="clear"></div>
    </div>
</div>

第二种：
给浮动的两个div分别写一种不同颜色的背景。其他的就没有什么区别了。

<div>
    <div>
        <div style="float:left;">
            <span class="floatL">购买支持</span>
            <span class="leftNum">60%</span>
        <div>
        </div style="float:right;">
            <span class="rightNum">40%</span>
            <span class="floatR">购买支持</span>
        </div>
        <div class="clear"></div>
    </div>
</div>

Answer 3

左右两个圆角矩形，中间一左一右两个矩形，利用js改变宽度，保持总宽度不变

Answer 4

赞同楼上说的方法，当支持比例发生变化时，动态数据改变两者长度

Answer 5

两个div分别存放两张背景图，一张放在另一张上面，设置上面 那个div的宽度就好了

Answer 6

突然好奇有个问题，两者的色素不会滚到 两边的 圆角矩形里面吗？比例都是在中间变的？如果不是那我就觉得楼上的布局说法，就不靠谱了。