修改后的答案

Question

当用户将鼠标悬停在该图像的缩略图上时（例如图库），我正在尝试交换主图像。我在编辑DOM时需要使用set和clearInterval。所有这些都使用香草JavaScript。我在这里遇到的问题是：

悬停的图像会淡出，但不会消失。
每次悬停时，交换和淡入淡出效果都会加快。

我知道set和clearInterval与此有关，但是我无法使其正常工作。

const MAINIMG = document.getElementById("mainImage");
let imgSrc;

function swapImg(e) {
    MAINIMG.style.opacity = 1;
    imgSrc = e.target.src;

    if (MAINIMG.currentSrc != e.target.currentSrc) {
        fadeImg();    
    } 
}

function fadeImg() {
    timer = setInterval(opacity, 100);
}

function opacity(src) {

    if (MAINIMG.style.opacity >= 0.5) {
        MAINIMG.style.opacity = MAINIMG.style.opacity - 0.1;

    } else if (MAINIMG.style.opacity == 0.4) {
        MAINIMG.src = imgSrc;
        MAINIMG.style.opacity = MAINIMG.style.opacity + 0.1;
        clearInterval(timer);
    }
}

document.getElementById("imgOne").addEventListener("mouseover", swapImg);
document.getElementById("imgTwo").addEventListener("mouseover", swapImg);

HTML

<img id="mainImage" src="../images/imgOne.jpg" alt="" width="200" />

<div id="galleryImages">
   <img src="../images/imgOne.jpg" height="111.35" id="imgOne"/>
   <img src="../images/imgTwo.jpg" width="80" id="imgTwo" />
</div>

Answer 1

修改后的答案

style.opacity值有一个有趣的行为。当其值大于0时，它是一个整数，但当其值达到0时，它成为一个字符串。因此，在进行MAINIMG.style.opacity = MAINIMG.style.opacity + 0.1;时，您实际上是在0.1上添加"0"。

您可以通过将不透明度值解析为浮点数，然后将其添加0.1来解决此问题。请查看下面的示例。

MAINIMG.style.opacity = parseFloat(MAINIMG.style.opacity) + 0.1;

原始答案

CSS非常擅长处理过渡，并且可以为您省去计算元素不透明度的麻烦。因此，如果您可以尝试使用它。

在下面，我已经举例说明了如何结合使用Vanilla JavaScript和CSS使其工作。

与您自己的示例一样，swapImg函数将获取悬浮图像的src，并检查MAINIMG.src是否与悬浮图像不同。如果不是，它将为MAINIMG添加一个类到fade。此类将图像的不透明度设置为0。不透明过渡的持续时间在MAINIMG.style.transitionDuration = TRANSITION_SPEED + 'ms';行中设置。如果您愿意，可以修改此值。

完成转换后，MAINIMG将不可见。然后setTimeout进入，更改src的{{1}}并删除MAINIMG类，以便图像再次出现。

我希望这是您想要的。
如果您有任何问题，请通知我。

fade

const MAINIMG = document.getElementById("mainImage");
const GALLERYIMAGES = document.getElementById("galleryImages");
const TRANSITION_SPEED = 250;

MAINIMG.style.transitionDuration = TRANSITION_SPEED + 'ms';

function swapImg(e) {
  if (e.target.tagName === 'IMG') {
    const newSrc = e.target.src;
    if (newSrc !== MAINIMG.src) {
      MAINIMG.classList.add('fade');
      setTimeout(function() {
        MAINIMG.src = newSrc;
        MAINIMG.classList.remove('fade');
      }, TRANSITION_SPEED);
    }
  }
}

GALLERYIMAGES.addEventListener('mouseover', swapImg);

img {
  display: inline-block;
}

#mainImage {
  width: 200px;
  height: 200px;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

#mainImage.fade {
  opacity: 0;
}

#galleryImages img {
  width: 100px;
  height: 100px;
}

使用不透明度和setInterval淡入和交换图像

1 个答案:

修改后的答案

原始答案