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

Question

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

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

Answer 1

您可以通过利用clip CSS属性和一些添加的标记来实现这一点，以便为未显示的背景颜色提供底层容器。

摘要

在图像下方放置一个元素用于人工填充颜色，并设置其尺寸和位置以匹配图像。然后使用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)';
});

现场演示

• 的 On jsFiddle

参考

• clip on Mozilla Developer Network
• Browser support