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

Question

当用户将鼠标悬停在所述图像的缩略图(如画廊)上时，我试图交换主图像。我需要使用 set 和 clearInterval 编辑 DOM 时。所有这一切都使用普通的 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 value 有一个有趣的行为。当它的值大于 0 时，它是一个整数，但当它达到 0 时，它就变成一个字符串。所以当做MAINIMG.style.opacity = MAINIMG.style.opacity + 0.1;时您实际上是在添加 0.1至"0" .

您可以通过将不透明度值解析为 float 然后添加 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 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;
}

<img id="mainImage" src="https://source.unsplash.com/random/201x200" alt="" width="200" />

<div id="galleryImages">
   <img class="galleryHover" src="https://source.unsplash.com/random/201x200"/>
   <img class="galleryHover" src="https://source.unsplash.com/random/200x201"/>
</div>