我有一个简单的功能,可以使用 JavaScript 将一张图片替换为其他图片。我有一行在加载时淡入淡出。但是如何在显示新图像时添加淡入效果?
<script type="text/javascript">
function changeImage(a) {
document.getElementById("Image").src = a;
}
</script>
<div>
<img src="Mini-01.jpg" onclick="changeImage('Photo-01.jpg');">
<img src="Mini-02.jpg" onclick="changeImage('Photo-02.jpg');">
</div>
<div>
<img id="Image" src="Photo-01.jpg" onload="this.style.animation='fadein 2s'">
</div>
我尝试使用:
onchange="this.style.animation='fadein 2s'"
但它不起作用。
我认为在这种情况下使用 Jquery 太简单了。
你能帮我 Helm 吗?
最佳答案
您可以像这样在 changeImage() 函数上使用 css3 实现所需的效果。
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.container { top: 20%; left: 20%;}
.fade-in {
animation:fadeIn ease-in 1;
animation-duration:5s;
}
<script type="text/javascript">
function changeImage(a) {
var elm = document.getElementById("Image");
var clonedElm = elm.cloneNode(true);
elm.parentNode.replaceChild(clonedElm, elm);
document.getElementById("Image").src = a;
}
</script>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Perkin_Warbeck.jpg/200px-Perkin_Warbeck.jpg" onclick="changeImage('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Perkin_Warbeck.jpg/200px-Perkin_Warbeck.jpg');">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Leonard_Cohen_2008.jpg/200px-Leonard_Cohen_2008.jpg" onclick="changeImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Leonard_Cohen_2008.jpg/200px-Leonard_Cohen_2008.jpg');">
</div>
<div class="container">
<img id="Image" src="" class="fade-in">
</div>
关于javascript - 在 JavaScript 加载的图像上添加淡入效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40768738/