我是 JavaScript 新手。我真的很想找出一种简单的技术来改变位于另一个图像之上的图像的不透明度以逐渐显示底部图像。我想通过淡出来做到这一点。换句话说，随着时间的推移，每一秒都会逐渐从 style.opacity 属性中减去。
我想出了以下方法，但它似乎对我不起作用。
我的代码的当前状态发生变化，不透明度突然从 1 变为负数(-0.1、-0.2、-0.3 等)。这基本上会立即从顶部图像过渡到显示底部图像。
随着每一秒的过去，我想逐渐从 1 的不透明度变为(0.9、0.8、0.7 等)。
我想用纯 JavaScript 完成这个。我在 CSS 中发现了类似的东西，但我不想使用那种方法。
我假设 (var currentOp = document.getElementById('guitar2').style.opacity;) 将 currentOp 变量视为字符串。因此，我尝试了将解析为 float 的组合，进行减法并改回字符串，随着时间的推移逐渐设置不透明度无效。
<!DOCTYPE>
<html>
<head>
<style>
#guitar1
{
position: relative;
top: 0;
left: 0;
}
#guitar2
{
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
}
</style>
</head>
<body onload="runTime()">
<script>
var timer;
function reduceOpacity()
{
var op = document.getElementById('guitar2');
var currentOp = document.getElementById('guitar2').style.opacity;
//currentOp = (parseFloat(currentOp) - 0.1).toString();
currentOp -= 0.1;
op.style.opacity = currentOp;
}
function runTime()
{
timer = setInterval(reduceOpacity, 1000);
}
</script>
<h4 id="header">Gibson Les Paul</h4>
<div style="position: relative; left: 0; top: 0;">
<img src="gibson1.png" id="guitar1" width="500" />
<img src="gibson2.png" id="guitar2" width="500" />
</div>
<button type="button" onclick='document.getElementById("header").innerHTML = "yea"'>Click Me!</button>
</body>
</html>
最佳答案
使用 getComputedStyle 和 getPropertyValue 在加载时检索元素样式的准确表示。
style.property 有不更新的习惯，有时候会莫名其妙的拉默认值，很多值都设置好之后才能抓取。如果您在原始示例中使用 console.log(op.style.opacity)，您会看到它提取一个空字符串，然后在将其转换为 0 后从那里开始倒计时。
然后您可以使用 clearInterval 来停止该函数在该点之后继续运行。
//get the style value with getComputedStyle, which is an accurate representation of
//all element styling on load.
var currentOp = getComputedStyle(op).getPropertyValue("opacity");
// clear the interval if opacity is less than or equal to 0
if(currentOp <= 0) clearInterval(timer);
console.log(currentOp);
<!DOCTYPE>
<html>
<head>
<style>
#guitar1
{
position: relative;
top: 0;
left: 0;
}
#guitar2
{
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
}
</style>
</head>
<body onload="runTime()">
<script>
var timer;
function reduceOpacity()
{
var op = document.getElementById('guitar2');
//get the style value with getComputedStyle, which is an accurate representation of
//all element styling on load.
var currentOp = getComputedStyle(op).getPropertyValue("opacity");
// clear the interval if opacity is less than or equal to 0
if(currentOp <= 0) clearInterval(timer);
console.log(currentOp);
//currentOp = (parseFloat(currentOp) - 0.1).toString();
currentOp -= 0.1;
op.style.opacity = currentOp;
}
function runTime()
{
timer = setInterval(reduceOpacity, 1000);
}
</script>
<h4 id="header">Gibson Les Paul</h4>
<div style="position: relative; left: 0; top: 0;">
<img src="gibson1.png" id="guitar1" width="500" />
<img src="data:image/png;base64,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" id="guitar2" width="500" />
</div>
<button type="button" onclick='document.getElementById("header").innerHTML = "yea"'>Click Me!</button>
</body>
</html>注意:我不得不替换你的图片，因为它是本地文件。
关于javascript - 通过在一段时间内改变不透明度在 JavaScript 中创建褪色图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54314906/