1

我有一个图像，我想根据代表百分比的动态变化值填充一些颜色，例如，如果该值是 50%，则图像的一半应该被着色。

如何使用 JavaScript 来实现（可以使用 jQuery）？

4

1 回答 1

3

您可以通过利用clipCSS 属性和一些添加的标记来为不显眼的背景颜色提供底层容器来实现这一点。

抽象的

在图像下方放置一个元素以进行人造颜色填充，并设置其尺寸和位置以匹配图像'。然后使用 JavaScript 动态剪辑图像 - 从而显示底层颜色 -clip根据您的需要更改图像元素的值（当然，您可以单独控制每个偏移量，例如左、下）。

注意：要具体实现您想要的效果，您可以更改底层元素以包含另一个适合您需要的图像（即空桶的顶部图像和满桶的底部图像）。

执行

在此示例中，滑块用于触发值更改。

标记

<input type="range"  min="0" max="100" id="slider" value="100" />
<div id="underlay"></div>
<img src="http://placekitten.com/500/207" id="image" />

风格

#slider,
#image,
#underlay {
    /* absolute positioning is mandatory for clipped elements (#image) */
    position: absolute;
    left: 50px;
    width: 500px;
}
#image,
#underlay {
    top: 100px;
    height: 207px;
}
#image {
    /* initial clip state */
    clip: rect(auto, auto, auto, 500px);
}
#slider {
    top: 50px;
}
#underlay {
    background-color: #4C76A5;
}

功能性

var img = document.getElementById('image');
var sld = document.getElementById('slider');

sld.addEventListener('change', function(e) {

    // get the slider value
    var val = e.srcElement.value;
    // calc the percentage to pass an absolute length value to the clip property
    var perc = img.width / 100 * val;

    // set the images' left offset clip accordingly
    img.style.clip = 'rect(auto, auto, auto, ' + perc + 'px)';
});

现场演示

参考

于 2012-07-27T18:30:27.910 回答