1

パーセンテージを表す動的に変化する値に基づいて、色で塗りつぶしたい画像があります。たとえば、値が 50% の場合、画像の半分に色を付ける必要があります。

JavaScript を使用してそれを達成する方法 (jQuery を使用できます)?

4

1 に答える 1

3

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)';
});

ライブデモ

参考文献

于 2012-07-27T18:30:27.910 に答える