网站标题psdwordpress商城 微信支付宝
图片鼠标悬停切换效果
功能说明
页面展示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属性存储额外信息，用于区分不同图片
- 修改
这个案例不仅展示了鼠标事件的应用，更重要的是演示了==和=的正确使用方法，以及循环在简化代码中的作用，是JavaScript DOM操作的基础实践。