Google Web Designer在源代码中动态调整不透明度

Question

现在，我目前有一个滑块和两个图像在我的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;
 }

此滑块，如果滑块值向右移动（较高25）应将模糊删除并将不透明度设置为1。如果将滑块值向左移动（较低25），则会发生VICE反之亦然。这是我必须执行此操作的当前代码：

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

此代码可完美。但是，无论出于何种原因，opacity都不会改变。IDK如果是因为opacity在GWD中工作时是石头设置的。如果您console.log(img_1.style.opacity = 1 - sliderPercentage)，您将在代码上看到数学。它只是不调整不透明度。

任何建议和想法都将受到极大的赞赏。当我不运行setBlur函数时，也应该注意到它，setOpacity函数可行。当我运行setBlur时，它只是不起作用。

Answer 1

也不熟悉GWD，但我认为问题是您正在重新分配整个style属性，因此以后更改覆盖了前者。用

替换ele.setAttribute("style", "...")

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

应该解决您的问题。

Answer 2

我对GWD不熟悉，但我尝试了（一些较小的更改）：

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

我认为它的行为是预期的。

请在：

上检查完整解决方案

https://jsfiddle.net/1eumfwoh/