2016-06-23 11 views
0

私は現在何を構築しているのか分かりません。あなたはそれが両方の画像のプロパティ(ぼかし、不透明度)を変更しますスライダを右に動かすと、現在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 

私はこの現在の問題に取り組むことができる方法上の任意のアイデア?私は、異なるブラウザ間で機能するものを作成することにあまり慣れていません。ヒントやご提案ありがとうございます。

+0

これはエラーメッセージではなく、警告です(いくつかのコードは['__proto__']を設定しています(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)。 )?)。また、投稿されたスニペットはこの警告メッセージとは関係がないようです。使用しているライブラリが原因になっているのでしょうか? – Teemu

+0

@ Teemu「setBlurが何をしているのか」というあなたの質問のおかげで、私は答えを見つけ出すことができました。あなたの時間と援助に感謝します。 – Nappstir

答えて

0

したがって、問題は、私のsetBlur機能で条件文が提示された順序でした。 mozFilterの状態を動かすと、それは正常に機能を実行することができました。私はこれがそれらのプロパティを発見したためだと思っていますが、Firefoxではそれらを変更できないので、-moz-filterを変更する必要があります。

関連する問題