两种鼠标hover切换对应图片方法对比

时间：2024-11-15 17:20:05

方法一：鼠标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 属性来加载更复杂的图片。

相关文章