两种鼠标hover切换对应图片方法对比
方法一：鼠标hover时使用JS给元素添加类名达到切换图片效果
<!-- hover元素 -->
<div class="hover-div">
<ul>
<li class="hover-div-item" data-index="1">当鼠标hover我切换对应的图片1</li>
<li class="hover-div-item" data-index="2">当鼠标hover我切换对应的图片2</li>
<li class="hover-div-item" data-index="3">当鼠标hover我切换对应的图片3</li>
<li class="hover-div-item" data-index="4">当鼠标hover我切换对应的图片4</li>
</ul>
</div>
<!-- 图片展示 -->
<div class="image-display active-img">
<img src="example1.png" alt="Displayed Image">
</div>
<div class="image-display">
<img src="example2.png" alt="Displayed Image">
</div>
<div class="image-display">
<img src="example3.png" alt="Displayed Image">
</div>
<div class="image-display">
<img src="example4.png" alt="Displayed Image">
</div>
<!-- 样式 -->
<style>
.image-display{
display: none;
}
.active-img{
display: block !important;
}
</style>
<!-- JS -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const navItems = document.querySelectorAll('.hover-div-item');
const imageDisplay = document.querySelectorAll('.image-display');
navItems.forEach(item => {
item.addEventListener('mouseenter', () => {
imageDisplay.forEach(i => i.classList.remove('active-img'));
const divIndex = item.getAttribute('data-index');
imageDisplay[divIndex-1].classList.add('active-img');
});
});
});
</script>方法二：使用JS获取hover的元素所带的data-img属性值，赋值给图片src属性达到切换图片效果
<!-- hover元素 -->
<div class="hover-div">
<ul>
<li class="hover-div-item" data-index="1" data-imgsrc="example1.png">当鼠标hover我切换对应的图片1</li>
<li class="hover-div-item" data-index="2" data-imgsrc="example2.png">当鼠标hover我切换对应的图片2</li>
<li class="hover-div-item" data-index="3" data-imgsrc="example3.png">当鼠标hover我切换对应的图片3</li>
<li class="hover-div-item" data-index="4" data-imgsrc="example4.png">当鼠标hover我切换对应的图片4</li>
</ul>
</div>
<!-- 图片展示 -->
<div class="image-display">
<img id="displayed-image" src="example1.png" alt="Displayed Image">
</div>
<!-- 样式 -->
<style>
.image-display{
display: block;
}
</style>
<!-- JS -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const navItems = document.querySelectorAll('.hover-div-item');
const displayedImage = document.getElementById('displayed-image');
navItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const imgSrc = item.getAttribute('data-imgsrc');
displayedImage.src = imageUrl;
});
});
});
</script>解析：
1. 通过添加类名切换图片（CSS控制）
- 方式：使用 JavaScript 在
hover事件时给元素添加类名，然后通过 CSS 控制该类名下图片的切换效果。 - 优点：
- 性能较好：因为图片切换通过 CSS 实现，浏览器的渲染性能较好，尤其是当涉及到复杂动画时，CSS 能更好地利用硬件加速。
- 解耦：JavaScript 负责事件绑定，CSS 控制样式，避免了将所有逻辑写在 JavaScript 中，使代码结构更清晰。
- 响应式设计方便：通过 CSS 可以很容易地适配不同的屏幕尺寸和设备。
- 缺点：
- 灵活性较差，尤其是在动态加载或更复杂的图片切换场景下（如异步加载图片），需要结合更多 JavaScript 代码。
2. 通过
data-imgsrc属性切换图片（JavaScript控制）
- 方式：使用 JavaScript 在
hover时获取元素的data-imgsrc属性值，然后直接修改目标图片的src属性。 - 优点：
- 灵活性高：可以直接通过 JavaScript 控制图片的切换，适用于需要动态处理的数据（比如从服务器获取的图片或需要根据不同条件加载不同的图片）。
- 直接控制：如果你需要更复杂的逻辑，比如逐步切换图片、延迟加载或异步图片切换等，JavaScript 方式提供了更多的控制权。
- 缺点：
- 性能问题：如果操作不当，频繁修改 DOM 可能会影响性能，尤其是在较多图片元素上执行时。
- 样式耦合度高：直接通过 JavaScript 控制样式，可能使得 HTML 结构与样式紧密耦合，难以维护和扩展。
性能对比：
- CSS 方法的性能通常更优，因为浏览器的渲染引擎对 CSS 动画优化得更好，且无需每次都触发 JavaScript 执行。
- JavaScript 方法可能需要频繁操作 DOM，如果每次
hover都去修改src属性，可能会带来一定的性能开销，尤其是在多个图片的情况下。
总结：
- 优先选择 CSS 方法，如果你的切换需求简单，并且只涉及到预定义的几种样式或图片。CSS 方法在性能上通常更加高效，并且代码结构更清晰。
- 如果你有 动态数据 或 复杂逻辑，比如每次
hover时需要加载不同的图片，或者图片是异步加载的，使用 JavaScript 切换src属性会更合适。
如果可以，最好是将两者结合使用：通过 CSS 实现基本的切换效果，而在需要时通过 JavaScript 动态获取 data-img 属性来加载更复杂的图片。