实现鼠标悬停图片切换与智能恢复原始SRC的教程-js教程-PHP中文网

实现鼠标悬停图片切换与智能恢复原始SRC的教程

本教程详细阐述了如何利用JavaScript和jQuery实现图片在鼠标悬停时动态切换，并在鼠标移开时智能恢复到原始图片。文章重点解决了如何优雅地获取并保存原始图片SRC，避免硬编码，通过正确的DOM元素选择器（如querySelector或jQuery）确保代码的可维护性和可扩展性，同时涵盖了配套文本的显示与隐藏逻辑。

概述

在网页交互设计中，鼠标悬停（mouseover）时图片切换、鼠标移开（mouseout）时恢复原始图片是一种常见的需求。这不仅能提升用户体验，还能在有限的空间内展示更多信息。本教程将指导您如何使用jquery和原生javascript实现这一功能，特别关注如何智能地获取并恢复原始图片src，避免硬编码带来的维护难题。

HTML 结构准备

首先，我们需要一个清晰的HTML结构来承载图片和触发切换的元素。通常，我们会有一个主图片显示区域和一些“热点”链接，每个热点链接都关联一个要切换的图片SRC和要显示的文本。

<div class="col-12 text-center">
    <h3>标题</h3>
    <div class="name-wrapper">
        <span id="name1" class="some-name opacity-0">名称 1</span>
        <span id="name2" class="some-name opacity-0">名称 2</span>
    </div>
</div>
<div class="col-12">
    <div class="img-set">
        <img src="images/2023/some-img.jpg" alt="原始图片" />
    </div>
    <div class="hotspots">
        <a href="#"  data-target="name1">测试1</a>
        <a href="#"  data-target="name2">测试2</a>
    </div>
</div>

登录后复制

在这个结构中：

.img-set img 是我们要动态切换的图片。
.hotspots a 是触发切换的链接。
data-src 属性存储了鼠标悬停时要切换到的图片路径。
data-target 属性关联了一个<span>元素的ID，用于显示或隐藏相关文本。
opacity-0 类用于初始隐藏文本。

动态切换图片与文本的逻辑

当鼠标悬停在.hotspots a元素上时，我们需要执行以下操作：

获取当前悬停链接的data-src属性值。
将.img-set img的src属性更新为获取到的data-src值。
获取当前悬停链接的data-target属性值。
找到对应的<span>元素，并移除opacity-0类，使其可见。

以下是使用jQuery实现的mouseover事件处理函数：

$(".hotspots a").mouseover(function() {
    // 1. 获取要切换的图片SRC
    var newSrc = $(this).attr('data-src');
    // 2. 更新主图片的SRC
    $(".img-set img").attr("src", newSrc);

    // 3. 获取要显示的文本ID
    var targetId = $(this).data("target");
    // 4. 移除隐藏类，显示文本
    $("#" + targetId).removeClass("opacity-0");
});

登录后复制

恢复原始图片：关键与解决方案

鼠标移开时，我们需要将图片恢复到其原始状态，并隐藏相关文本。这里的挑战在于如何获取原始图片的SRC，而无需在mouseout事件处理函数中硬编码其路径。

错误的尝试及原因分析

一些开发者可能会尝试在DOM加载完成后立即获取原始SRC，并将其存储在一个变量中，然后在mouseout事件中使用。例如：

$(document).ready(function() {
    // 尝试获取原始SRC，但可能出错
    var originalImgSrc = document.getElementsByClassName(".img-set img").getAttribute("src");

    // ... mouseover 事件 ...

    $(".hotspots a").mouseout(function() {
        // 使用存储的原始SRC
        $('.img-set img').attr("src", originalImgSrc);
        // ... 隐藏文本 ...
    });
});

登录后复制

上述代码中的var originalImgSrc = document.getElementsByClassName(".img-set img").getAttribute("src");是错误的。

错误原因：

智标领航

专注招投标业务流程的AI助手，智能、高效、精准、易用！

117

查看详情

document.getElementsByClassName()方法期望一个或多个类名作为参数，且不带点(.)前缀。例如，document.getElementsByClassName("img-set")。
即使参数正确，getElementsByClassName()返回的是一个HTMLCollection（一个类似数组的集合），而不是单个DOM元素。您不能直接在一个HTMLCollection上调用getAttribute()方法。
如果想通过CSS选择器来获取元素，应该使用document.querySelector()（返回匹配的第一个元素）或jQuery的$(".selector")。

由于上述错误，originalImgSrc变量将不会正确获取到图片SRC，很可能为undefined或导致运行时错误，从而使mouseout功能失效。

正确的解决方案

为了正确获取原始图片SRC并使其在mouseout事件中可用，我们需要：

在DOM完全加载后，使用正确的选择器（如document.querySelector或jQuery）获取.img-set img元素。
获取该元素的src属性值，并将其存储在一个作用域适当的变量中。
在mouseout事件处理函数中，使用这个存储的变量来恢复图片SRC。

以下是修正后的mouseout事件处理函数，结合了正确的原始SRC获取方式：

$(document).ready(function() {
    // 在DOM加载完成后，使用正确的选择器获取原始图片SRC
    // 方式一：使用 jQuery 选择器
    var originalImgSrc = $(".img-set img").attr("src");
    // 方式二：使用原生 JavaScript 的 querySelector
    // var originalImgSrc = document.querySelector(".img-set img").getAttribute("src");

    $(".hotspots a").mouseover(function() {
        var newSrc = $(this).attr('data-src');
        $(".img-set img").attr("src", newSrc);

        var targetId = $(this).data("target");
        $("#" + targetId).removeClass("opacity-0");
    });

    $(".hotspots a").mouseout(function() {
        // 恢复到之前存储的原始图片SRC
        $('.img-set img').attr("src", originalImgSrc);

        // 隐藏相关文本
        var targetId = $(this).data("target");
        $("#" + targetId).addClass("opacity-0");
    });
});

登录后复制

通过将originalImgSrc变量定义在$(document).ready()内部但所有事件处理函数外部，它就成为了一个局部变量，可以被mouseover和mouseout事件处理函数访问，从而解决了作用域和数据持久性问题。

完整代码示例

将上述HTML结构和JavaScript代码整合，得到一个完整的、可运行的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬停图片切换与恢复</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
        .col-12 { width: 80%; max-width: 600px; margin-bottom: 20px; text-align: center; }
        .img-set img { max-width: 100%; height: auto; border: 1px solid #ccc; }
        .hotspots { margin-top: 20px; }
        .hotspots a { display: inline-block; margin: 0 10px; padding: 8px 15px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; }
        .hotspots a:hover { background-color: #0056b3; }
        .name-wrapper { margin-top: 10px; }
        .some-name { font-size: 1.2em; font-weight: bold; color: #333; transition: opacity 0.3s ease; }
        .opacity-0 { opacity: 0; } /* 初始隐藏 */
    </style>
</head>
<body>

    <div class="col-12 text-center">
        <h3>产品展示</h3>
        <div class="name-wrapper">
            <span id="name1" class="some-name opacity-0">产品A详情</span>
            <span id="name2" class="some-name opacity-0">产品B详情</span>
        </div>
    </div>
    <div class="col-12">
        <div class="img-set">
            <img src="https://via.placeholder.com/600x400/FF0000/FFFFFF?text=Original_Image" alt="原始图片" />
        </div>
        <div class="hotspots">
            <a href="#"  data-target="name1">查看产品A</a>
            <a href="#"  data-target="name2">查看产品B</a>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 在DOM加载完成后，获取原始图片SRC并存储
            var originalImgSrc = $(".img-set img").attr("src");

            // 鼠标悬停事件
            $(".hotspots a").mouseover(function() {
                var newSrc = $(this).attr('data-src');
                $(".img-set img").attr("src", newSrc);

                var targetId = $(this).data("target");
                $("#" + targetId).removeClass("opacity-0");
            });

            // 鼠标移开事件
            $(".hotspots a").mouseout(function() {
                // 恢复到原始图片SRC
                $('.img-set img').attr("src", originalImgSrc);

                // 隐藏相关文本
                var targetId = $(this).data("target");
                $("#" + targetId).addClass("opacity-0");
            });
        });
    </script>

</body>
</html>

登录后复制

开发注意事项与最佳实践

DOM加载时机: 确保所有DOM操作都在$(document).ready()或原生JS的DOMContentLoaded事件中执行，以保证元素已完全加载并可被脚本访问。
选择器准确性: 正确使用CSS选择器至关重要。jQuery的选择器功能强大且易用，而原生JS提供了document.querySelector()和document.querySelectorAll()等方法，它们接受CSS选择器字符串作为参数，是获取元素的推荐方式。避免混淆getElementsByClassName和querySelector的用法。
变量作用域: 存储原始图片SRC的变量（如originalImgSrc）应定义在事件处理函数外部，但在$(document).ready()内部，这样它才能被所有相关的事件处理函数访问，且只在DOM加载时初始化一次。
性能考虑: 如果页面中存在大量需要动态切换的图片，可以考虑图片预加载技术，在页面加载时就将所有可能用到的图片加载到浏览器缓存中，避免用户在悬停时出现图片加载延迟。
用户体验与可访问性:
- 为<img>标签提供有意义的alt属性，这对于SEO和屏幕阅读器用户至关重要。
- 考虑添加CSS过渡效果（如transition），使图片切换和文本显示/隐藏更加平滑。
代码可读性与维护: 保持代码整洁，添加适当的注释，尤其是在复杂的逻辑部分。

总结

通过本教程，我们学习了如何利用jQuery和原生JavaScript实现鼠标悬停图片切换及智能恢复原始图片的功能。关键在于理解如何正确地在DOM加载时捕获并存储原始图片SRC，并在mouseout事件中利用它，从而避免了硬编码，提升了代码的可维护性和可扩展性。掌握这些技术，您将能更灵活地创建动态且用户友好的网页交互效果。

以上就是实现鼠标悬停图片切换与智能恢复原始SRC的教程的详细内容，更多请关注php中文网其它相关文章！