Google Web Designer 在源代码中动态调整不透明度
Google Web Designer dynamically adjust opacity in source code
现在我的 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;
}
如果将此滑块移至滑块值(较高的 25)的右侧,则应消除模糊并将不透明度设置为 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));
}
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
时,它就不起作用了。
我对 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)")
}
}
而且我认为它的行为符合预期。
请查看完整解决方案:
也不熟悉 GWD,但我认为问题是您正在重新分配整个 style
属性,因此以后的更改会覆盖前者。将 ele.setAttribute("style", "...")
替换为
ele.style["-webkit-filter"] = "blur(" + value + "px)";
应该可以解决您的问题。
现在我的 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;
}
如果将此滑块移至滑块值(较高的 25)的右侧,则应消除模糊并将不透明度设置为 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));
}
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
时,它就不起作用了。
我对 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)")
}
}
而且我认为它的行为符合预期。
请查看完整解决方案:
也不熟悉 GWD,但我认为问题是您正在重新分配整个 style
属性,因此以后的更改会覆盖前者。将 ele.setAttribute("style", "...")
替换为
ele.style["-webkit-filter"] = "blur(" + value + "px)";
应该可以解决您的问题。