使用javascript的男性女性百分比分布动态图像

Question

我在这里使用了女性和男性的图像作为徽标，我从javascript计算百分比，但图像是静态的，我想将其转换为动态。

意味着在这里假设女性的百分比是55％，然后在图像中我们将标志视为半满和半空。但如果我们得到的结果百分比为女性10％，那么我的徽标也与图片中显示的相同。因为它是静态图像。我想让它变得动态。 我是css，javascript的新手。 任何起点或参考链接也会对我有所帮助。 提前谢谢。

Answer 1

您可以尝试这个概念：

HTML：

<span class="percentage"><span style="height:45%;"></span></span>

CSS：

.percentage {
    width:41px;
    height:97px;
    display:inline-block;
    position:relative;
    background:url(gray.png) no-repeat left bottom;
}
.percentage span {
    width:100%;
    height:0;
    display:inline-block;
    position:absolute;
    left:0; bottom:0;
    background:url(blue.png) no-repeat left bottom;
}

图片：

Demo Link:

Answer 2

您可以使用带透明度和CSS的.png图像。 然后使用不同的容器，如下所示：

<div class="fContainer">
    <div class="fFill" style="height:50%;"></div>
    <img class="femaleImg" src='path/to/female.png'/>
</div>

然后使用css设置样式：

.fContainer{
    position:relative;
    float:left;
    width: 100px;
    width: 100px;
}
.fFill{
    position:relative;
    width:100%;
    left:0;
    bottom:0;
}
.femaleImg{
    position:absolute;
    left:0;
    bottom:0;
    height:100px;
    width:100px;
}

之后，您可以使用javascript动态调整.fFill元素高度百分比，或者直接在样式属性上调用php（o whatever）。

Answer 3

我写了一个答案，但是现在，我看到它已经被回答了，但是我会发布我的JSFiddle，以防将来有人发现它感兴趣。

它还是两个彼此重叠的图像，其中一个图像使用max-height属性和溢出隐藏一起被截断。

Two images

var percentage = 25;
var elem = document.getElementById('greyImg');

elem.setAttribute('style', 'max-height: ' + (100-percentage) + 'px; overflow: hidden;');

没有花哨的数学，这个图像恰好是100px高。

Answer 4

如果您的项目不需要高兼容性，我建议使用Css -webkit-mask。 它可以覆盖底部元素上的蒙版，因此您可以通过调整红色或蓝色元素的高度来使其动态化。