Google Web Designer regola dynamicmente l’opacità nel codice sorgente

Al momento, al momento ho un dispositivo di scorrimento e due immagini sul mio annuncio Google

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

Questo cursore, se spostato a destra del valore del cursore (più alto 25) dovrebbe rimuovere la sfocatura e impostare l’opacità su 1. Se spostato a sinistra del valore del cursore (inferiore 25), si verifica invece il contrario. Ecco il codice corrente che devo fare questo:

 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.setAttribute("style", "-webkit-filter:blur(" + value + "px)") } } 

Questo codice funziona perfettamente. Tuttavia, per qualsiasi motivo, l’ opacity non cambierà. IDK se lo è perché l’ opacity è impostata su pietra quando si lavora all’interno di GWD . Se console.log(img_1.style.opacity = 1 - sliderPercentage) vedrai che la matematica sul codice funziona … semplicemente non sta modificando l’opacità.

Eventuali suggerimenti e idee sarebbero molto apprezzati. Va anche notato che, quando NON setBlur funzione setOpacity funzione setOpacity funziona. Semplicemente non funziona quando sto eseguendo setBlur .

Neanche a conoscenza di GWD, ma presumo il problema è che stai riassegnando l’intero attributo di style , quindi l’alterazione successiva sovrascriverà la prima. Sostituire ele.setAttribute("style", "...") con

 ele.style["-webkit-filter"] = "blur(" + value + "px)"; 

dovrebbe risolvere il problema.

Non ho familiarità con GWD ma l’ho provato (con alcune modifiche minori):

  $("#slider").change(function(){ var img_1 = document.getElementById("img_1"); var img_2 = document.getElementById("img_2"); var sliderPercentage = ($(this).val() / $(this).attr('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.setAttribute("style", "-webkit-filter:blur(" + value + "px)") } } 

e penso che si comporti come previsto.

Si prega di controllare la soluzione completa a:

https://jsfiddle.net/1eumfwoh/