如何根据动态变化的百分比值为图像着色?
我有一个图像,我希望根据表示百分比的动态变化值填充一些颜色,例如,如果值为50%,图像的一半应该着色。
如何使用JavaScript实现(jQuery可以使用)?
您可以通过利用clip
CSS属性和一些添加的标记来实现这一点,以便为未显示的背景颜色提供底层容器。
抽象
在图像下方放置一个元素用于人工填充颜色,并设置其尺寸和位置以匹配图像。 然后使用JavaScript动态剪辑图像 – 从而揭示底层颜色 – 通过根据需要更改图像元素的clip
值(当然,您可以单独控制每个偏移,例如左,下)。
注意:要实现您的特定目标,您可以更改底层元素以包含另一个适合您需要的图像(即空桶的顶部图像和完整图像的底部图像)。
履行
在此示例中,滑块用于触发值更改。
标记
样式
#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; }
function
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)'; });
现场演示
- 在jsFiddle上
参考
- 在Mozilla开发者网络上
clip
- 浏览器支持