时间戳

首页 > 解决方案 > 是否可以让 if 语句慢慢地将一个 img 更改为另一个？

javascript - 是否可以让 if 语句慢慢地将一个 img 更改为另一个？

问题描述

这是一个简单的 JS 函数：onclick将检查某些 div 并替换这些 div 中的图像。

我的问题：我可以只使用 JS 来调节图像之间的过渡时间吗？

谢谢！

function menu() {
    if (document.getElementById("contactus").getAttribute('src') ==
        "images/mainpage/image1.png") {
        document.getElementById("contactus").src =
            "images/mainpage/image2.png";
    }
}

标签： javascript

解决方案

src不，如果您更改属性，则无法执行此操作。然而，还有其他方法可以做到这一点。您可以使用两个图像元素并为opacitycss 属性设置动画，或者您可以创建一个 div 并设置该background-image属性。

function changeImage1() {
  var img = document.getElementById("myimg1")
  img.style.opacity = 0;
}

function changeImage2() {
  var img = document.getElementById("myimg2")
  img.style.backgroundImage = 'url("https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675351/The_Verge_Cubeometry_Wallpaper_Portrait.0.png")'
}
#imgContainer {
  position: relative;
}

#myimg1 {
  transition: opacity 5s;
  position: absolute;
  top: 0;
  left: 0;
}

#myimg2 {
  background-image: url("https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675417/The_Verge_Singularity_Wallpaper_Portrait.0.png");
  background-size: contain;
  transition: background-image 5s;
  width: 100px;
  height: calc(100px * 3840 / 2160);
}
<h1>Option 1</h1>

<div id="imgContainer">
  <img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675351/The_Verge_Cubeometry_Wallpaper_Portrait.0.png" width="100">
  <img id="myimg1" src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675417/The_Verge_Singularity_Wallpaper_Portrait.0.png" width="100">
</div>
<button onclick="changeImage1()">Change</button>

<h1>Option 2<h1>

<div id="myimg2"></div>
<button onclick="changeImage2()">Change</button>

推荐阅读