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

Question

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

如何使用 JavaScript(可以使用 jQuery)实现？

Answer 1

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

摘要

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

注意:为了具体实现您想要的效果，您可以更改底层元素以包含适合您需要的另一张图片(即顶部图片是一个空桶，底部图片是一个完整的)。

实现

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

标记

<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