如何根据动态变化的百分比值为图像着色？

我有一个图像，我希望根据表示百分比的动态变化值填充一些颜色，例如，如果值为50％，图像的一半应该着色。

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

Answer 1

您可以通过利用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
• 浏览器支持