【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别

图片鼠标悬停切换效果

功能说明

页面展示4张默认图片，当鼠标移动到任意一张图片上时，该图片会切换为对应的特定图片（诗、书、画、唱）；当鼠标移出时，图片恢复为默认图片。

==和=的区别

在讲解案例前，先明确==和=的核心区别：

=：赋值运算符，用于给变量赋值（如x = 5表示将5赋值给变量x）
==：比较运算符，用于判断两个值是否相等（如x == 5判断变量x的值是否等于5）

注意：在条件判断语句中（如if语句），必须使用==进行比较，若误用=会导致逻辑错误。

方法一实现（代码更简洁）

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片悬停切换效果</title>
    <style>
        img {
            width: 200px;
            height: 300px;
        }
    </style>
    <script>
        window.onload = function() {
            // 获取所有图片元素
            var imgShuZu = document.getElementsByTagName("img");
            
            // 为每个图片添加事件
            for(var i of imgShuZu) {
                // 鼠标移入事件
                i.onmouseover = function() {
                    // 使用==进行条件判断，比较title属性值
                    if(this.title == "11") {
                        this.src = "img/1.jpg"; // 诗
                    }
                    if(this.title == "22") {
                        this.src = "img/2.jpg"; // 书
                    }
                    if(this.title == "33") {
                        this.src = "./img/3.jpg"; // 画
                    }
                    if(this.title == "44") {
                        this.src = "./img/4.png"; // 唱
                    }
                }
                
                // 鼠标移出事件
                i.onmouseout = function() {
                    // 恢复默认图片
                    this.src = "./img/三连.jpg";
                }
            }
        }
    </script>
</head>
<body>
    <!-- 所有图片默认显示同一图片，通过title属性区分 -->
    <img src="./img/三连.jpg" title="11" />
    <img src="./img/三连.jpg" title="22" />
    <img src="./img/三连.jpg" title="33" />
    <img src="./img/三连.jpg" title="44" />
</body>
</html>

方法二实现（逐个绑定事件）

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片悬停切换效果</title>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        window.onload = function() {
            // 获取所有图片元素
            var imgShuZu = document.getElementsByTagName("img");
            
            // 为第一张图片绑定事件
            imgShuZu[0].onmouseover = function() {
                this.src = "./img/1.jpg"; // 诗
            }
            imgShuZu[0].onmouseout = function() {
                this.src = "img/三连.jpg"; // 恢复默认
            }
            
            // 为第二张图片绑定事件
            imgShuZu[1].onmouseover = function() {
                this.src = "./img/2.jpg"; // 书
            }
            imgShuZu[1].onmouseout = function() {
                this.src = "img/三连.jpg";
            }
            
            // 为第三张图片绑定事件
            imgShuZu[2].onmouseover = function() {
                this.src = "./img/3.jpg"; // 画
            }
            imgShuZu[2].onmouseout = function() {
                this.src = "img/三连.jpg";
            }
            
            // 为第四张图片绑定事件
            imgShuZu[3].onmouseover = function() {
                this.src = "./img/4.png"; // 唱
            }
            imgShuZu[3].onmouseout = function() {
                this.src = "img/三连.jpg";
            }
        }
    </script>
</head>
<body>
    <img src="img/三连.jpg">
    <img src="img/三连.jpg">
    <img src="img/三连.jpg">
    <img src="img/三连.jpg">
</body>
</html>

两种方法对比分析

方法	优点	缺点	适用场景
方法一	代码更简洁，可维护性好，扩展性强	需要额外属性（title）区分图片	图片数量较多时
方法二	逻辑直观，无需额外属性	代码冗余，图片数量多时维护困难	图片数量较少时

关键技术点解析

事件绑定：
- 使用onmouseover事件监听鼠标移入
- 使用onmouseout事件监听鼠标移出
- 通过this关键字引用当前操作的图片元素
图片路径：
- img/1.jpg和./img/1.jpg两种路径写法均可
- ./表示当前目录，可省略
元素获取：
- 使用getElementsByTagName("img")获取所有图片元素，返回一个类数组对象
- 可通过索引（如imgShuZu[0]）访问单个图片
属性操作：
- 修改src属性切换图片
- 利用title属性存储额外信息，用于区分不同图片

这个案例不仅展示了鼠标事件的应用，更重要的是演示了==和=的正确使用方法，以及循环在简化代码中的作用，是JavaScript DOM操作的基础实践。