3

簡単な質問: 私はこれclip-path maskを で動作させChromeで同じ効果を得るための簡単な方法を知りたいFirefoxです.

私はいくつかの調査を行い、それが でFirefox's clip-path動作することを見ましsvgたが、それが唯一の方法ですか? その場合、動的に変更する方法はmask？

HTML:

 <div id="image1" class="frame">
    <div class="layer"></div>
    <div class="layer"></div>
 </div>
 <input id="range1" type="range" value=0 max=100 oninput="UpdateImage('image1');"></input>

Javascript:

function UpdateImage(id) {
    image_elem = document.getElementById(id);
    layers = image_elem.getElementsByClassName("layer");
    range = document.getElementById("range1");
    layers[1].setAttribute("style", "-webkit-clip-path:inset(" + range.value + "% 0 0 0)");
}

これがChromeでの作業です。

4

1 に答える 1

0

あなたの懸念がブラウザーのサポートである場合は、同じ出力に対して別のアプローチをお勧めします: ではなく高さを使用しclip-pathます。

これにより、(少なくとも) chrome、Firefox、IE、safari、opera... のブラウザー サポートが提供されます。

function UpdateImage(id) {
    image_elem = document.getElementById(id);
    layers = image_elem.getElementsByClassName("layer");
    range = 100 - document.getElementById("range1").value;
    layers[1].setAttribute("style", "height:" + range + "%");
}
.frame {
    position:relative;
    width: 375px;
    height: 250px;
}
.frame .layer {
    position:absolute;
    bottom:0;
    width: inherit;
    height: inherit;
    background-size: 100% auto;
    background-position: left bottom;
}
#image1 .layer:nth-child(1) {
    background-image:url("http://rlc.site90.net/images/img1_layer0.jpg");
}
#image1 .layer:nth-child(2) {
    background-image:url("http://rlc.site90.net/images/img1_layer1.jpg");
}
#range1 {
    width:375px;
}
<div id="image1" class="frame">
    <div class="layer"></div>
    <div class="layer"></div>
</div>
<input id="range1" type="range" value=0 max=100 oninput="UpdateImage('image1');"/>

于 2015-05-27T10:05:58.123 に答える