两种鼠标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 属性来加载更复杂的图片。

原文地址：https://blog.csdn.net/p_s_p/article/details/143777005

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！