私は現在何を構築しているのか分かりません。あなたはそれが両方の画像のプロパティ(ぼかし、不透明度)を変更しますスライダを右に動かすと、現在Firefoxのオブジェクトのフィルタプロパティを動的に変更してください
input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider" oninput="getInput(this.value, this.max)">
.img_1 {
position: absolute;
width: 180px;
height: 130px;
left: 62px;
top: 1px;
-webkit-filter: blur(5px);
opacity: .8;
}
.img_2 {
position: absolute;
width: 180px;
height: 130px;
left: 62px;
top: 1px;
-webkit-filter: blur(5px);
opacity: .8;
}
:私は2枚の画像と入力スライダーを持っています。ここで0にフォーカスおよび不透明度のフェードアウト1にフォーカスし、不透明に来る一方及び他方を有する前記機能を実行するコードは、次のとおり
function getInput(value, max) {
var img_1 = document.getElementById("img_1");
var img_2 = document.getElementById("img_2");
var sliderPercentage = (value/max).toFixed(2);
img_1.style.opacity = 1 - sliderPercentage
setBlur(img_1, (10 * sliderPercentage).toFixed(2));
img_2.style.opacity = sliderPercentage;
setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));
}
function setBlur(ele, value) {
if (ele.style.hasOwnProperty('filter'))
ele.style.filter = "blur(" + value + "px)";
if (ele.style.hasOwnProperty('-webkit-filter'))
ele.style["-webkit-filter"] = "blur(" + value + "px)";
if (ele.style.hasOwnProperty('webkitFilter'))
ele.style.webkitFilter = "blur(" + value + "px)";
if (ele.style.hasOwnProperty('mozFilter'))
ele.style.mozFilter = "blur(" + value + "px)";
if (ele.style.hasOwnProperty('oFilter'))
ele.style.oFilter = "blur(" + value + "px)";
if (ele.style.hasOwnProperty('msFilter'))
ele.style.msFilter = "blur(" + value + "px)";
}
このコードが通ってを通じて仕事をしていません。ただし、Firefox
で広告を表示しているときにフィルタを調整できません。これは私がコンソールに取得していますエラーです:
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create
私はこの現在の問題に取り組むことができる方法上の任意のアイデア?私は、異なるブラウザ間で機能するものを作成することにあまり慣れていません。ヒントやご提案ありがとうございます。
これはエラーメッセージではなく、警告です(いくつかのコードは['__proto__']を設定しています(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)。 )?)。また、投稿されたスニペットはこの警告メッセージとは関係がないようです。使用しているライブラリが原因になっているのでしょうか? – Teemu
@ Teemu「setBlurが何をしているのか」というあなたの質問のおかげで、私は答えを見つけ出すことができました。あなたの時間と援助に感謝します。 – Nappstir