Google Web Designer可以动态调整源代码中的透明度 [英] Google Web Designer dynamically adjust opacity in source code

问题描述

目前我的Google广告上目前有一个滑块和两个图片

  input class =gwd-input-13xh type =rangemin =0max =50value =25id =slideroninput =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; 
} 
  

此滑块如果向右移动滑块值并将不透明度设置为1.如果向左移动滑块值（低于25），则反之亦然。这里是目前的代码我要这样做：

  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））; 
} 
 
函数setBlur（ele，value）{
 if（ele.style.hasOwnProperty（'filter'））{
 ele.setAttribute ，-webkit-filter：blur（+ value +px））
} 
} 
  

这段代码完美无缺。然而，无论什么原因， opacity 都不会改变。 IDK如果是因为不透明度在 GWD 中工作时设置为石头。如果你 console.log（img_1.style.opacity = 1 - sliderPercentage）你会看到代码工作的数学。它只是不调整不透明度。 / p>

任何建议和想法将非常感激。还应该注意，当我不运行 setBlur 函数时， setOpacity 函数工作。它只是不工作，当我正在运行 setBlur 。

解决方案

也不熟悉GWD，但我认为问题是你重新分配整个 style 属性，因此以后的更改会覆盖前者。将 ele.setAttribute（style，...）替换为

  ele.style [ -  webkit-filter] =blur（+ value +px）; 
  

应该可以解决您的问题。

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.

解决方案

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.

这篇关于Google Web Designer可以动态调整源代码中的透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！