Google Web Designer dynamically adjust opacity in source code

问题

Right now I currently have a slider and two images on my Google ad

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

This slider, if moved right of slider value(higher 25) should remove blur and set opacity to 1. If moved left of slider value(lower 25) then vice versa occurs. Here is the current code I have to do this:

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)")
  }
}

This code works flawlessly. However, for whatever reason, the opacity will not change. IDK if it is because the opacity is set in stone when working within GWD. If you console.log(img_1.style.opacity = 1 - sliderPercentage) you will see the math on the code works.. it just isn't adjusting the opacity.

Any suggestions and ideas would greatly be appreciated. It also should be noted, when I do NOT run the setBlur function then the setOpacity function works. It just does not work when I am running setBlur.

回答1:

Not familiar with GWD either, but I assume the problem is you are re-assigning the whole style attribute, so later alteration overrides the former. Replacing ele.setAttribute("style", "...") with

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

should fix your issue.

回答2:

I'm not familiar with GWD but I tried it (with some minor changes):

 $("#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)")
  }
}

and I think it behaves as expected.

Please check full solution at:

https://jsfiddle.net/1eumfwoh/

来源：https://stackoverflow.com/questions/37996559/google-web-designer-dynamically-adjust-opacity-in-source-code

标签

javascript

html

css

google-web-designer