JS实现淡入淡出图片效果的方法分析

1. 简介

淡入淡出图片效果是网页开发中常见的效果之一。JS实现淡入淡出图片效果可以提高用户体验，让页面更加生动活泼。

2. 实现方法

2.1 使用CSS3实现

使用CSS3的transition属性可以实现淡入淡出图片的效果。

img {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
img:hover {
    opacity: 1;
}

上述代码中，设置图片的初始opacity为0，当悬浮在图片上时，opacity变为1，从而实现淡入淡出效果。

2.2 JS逐渐改变透明度实现

使用JS逐渐改变图片的透明度也可以实现淡入淡出效果。

HTML代码：

<img src="img.jpg" alt="淡入淡出图片">
<button onclick="fadeIn()">淡入</button>
<button onclick="fadeOut()">淡出</button>

JS代码：

const img = document.querySelector('img');
function fadeIn() {
    let opacity = 0;
    const timer = setInterval(() => {
        if(opacity>=1){
            clearInterval(timer);
        }
        img.style.opacity = opacity;
        opacity+=0.02;
    }, 10);
}
function fadeOut() {
    let opacity = 1;
    const timer = setInterval(() => {
        if(opacity<=0){
            clearInterval(timer);
        }
        img.style.opacity = opacity;
        opacity-=0.02;
    }, 10);
}

上述代码中，定义了两个函数fadeIn和fadeOut，当点击按钮时，页面调用相应的函数实现淡入和淡出。

3. 总结

以上两种方法都可以实现淡入淡出图片效果，具体使用哪种方法可以根据实际情况进行选择。CSS3方法实现简单，不需要过多的JS代码，适合对性能要求比较高的页面；JS方法需要编写代码，但是可以实现更加复杂的效果。