当前位置：首页 > news >正文

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

news 2025/9/6 10:43:19

图片鼠标悬停切换效果

功能说明

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

==和=的区别

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

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

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

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

<!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>

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

<!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属性存储额外信息，用于区分不同图片