图像放大效果示例【JavaScript】
实现效果：
当鼠标悬停在小图（缩略图）上时，大图（预览图）会随之更新为相应的小图，并高亮当前悬浮的小图的父元素。
代码：
1. HTML部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图像放大效果示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<img src="./image/image1.jpg" id="bigImg" alt="大图展示">
<ul>
<li class="active">
<img src="./image/image1.jpg" alt="小图1" class="smallImg">
</li>
<li>
<img src="./image/image2.jpg" alt="小图2" class="smallImg">
</li>
<li>
<img src="./image/image3.jpg" alt="小图3" class="smallImg">
</li>
<li>
<img src="./image/image4.jpg" alt="小图4" class="smallImg">
</li>
<li>
<img src="./image/image5.jpg" alt="小图5" class="smallImg">
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>2. CSS部分
* {
padding: 0;
margin: 0;
}
body {
background-color: #f5f5f5;
text-align: center;
}
#bigImg {
width: 300px;
height: 300px;
border: 2px solid #ccc;
margin-bottom: 20px;
}
ul {
list-style: none;
overflow: hidden;
padding: 0;
}
ul li {
float: left;
width: 60px;
height: 60px;
margin: 10px;
border: 2px solid #fff;
cursor: pointer;
}
ul li.active {
border-color: red;
}
ul li img {
width: 100%;
height: 100%;
}3. js部分
注：采用方式一 或 方式二 中的一种方式即可。
方式一：
var bigImg = document.getElementById('bigImg');
var smallImgs = document.getElementsByClassName("smallImg");
for (var i = 0; i < smallImgs.length; i++) {
smallImgs[i].onmouseover = function() {
// 清除所有li的active类
var liElements = document.querySelectorAll('ul li');
for (var j = 0; j < liElements.length; j++) {
liElements[j].classList.remove('active');
}
// 修改大图的src属性
var smallImgSrc = this.getAttribute('src');
bigImg.setAttribute('src', smallImgSrc);
// 为当前悬浮的img父li添加active类
this.parentNode.classList.add('active');
}
}代码解析：
1. 变量定义:
bigImg: 通过document.getElementById('bigImg')获取 ID 为bigImg的元素，通常是一个用于显示大图的<img>标签。smallImgs: 通过document.getElementsByClassName("smallImg")获取所有类名为smallImg的元素，通常是小图片的<img>标签集合。
2. 循环遍历小图片:
for (var i = 0; i < smallImgs.length; i++) {
- 使用
for循环遍历每一个小图片。
3. 鼠标悬停事件:
smallImgs[i].onmouseover = function() {
- 为每个小图片绑定
onmouseover事件，当鼠标悬停在小图片上时，执行以下代码：
4. 清除所有 li 的 active 类:
var liElements = document.querySelectorAll('ul li');
for (var j = 0; j < liElements.length; j++) {
liElements[j].classList.remove('active');
}
- 通过
document.querySelectorAll('ul li')获取所有ul内的li元素，并遍历它们，移除每个li的active类，确保只有当前的图片有高亮效果。
5. 更新大图的 src 属性:
var smallImgSrc = this.getAttribute('src');
bigImg.setAttribute('src', smallImgSrc);
- 获取当前悬停小图片的
src属性，然后将大图的src属性更新为该小图片的src，以便显示对应的图片。
6. 为当前悬浮的 img 的父 li 添加 active 类:
this.parentNode.classList.add('active');
- 获取当前小图片的父元素（通常是
li），并为其添加active类，以突出显示当前选中的小图片。
方式二：
var bigImg = document.getElementById('bigImg');
var smallImgs = document.querySelectorAll('ul li img');
smallImgs.forEach(function(smallImg) {
smallImg.onmouseover = function() {
// 清除所有li的active类
document.querySelectorAll('ul li').forEach(function(li) {
li.classList.remove('active');
});
// 修改大图的src属性
var smallImgSrc = this.getAttribute('src');
bigImg.setAttribute('src', smallImgSrc);
// 为当前悬浮的img父li添加active类
this.parentNode.classList.add('active');
}
});代码解析：
1. 获取元素：
var bigImg = document.getElementById('bigImg');
var smallImgs = document.querySelectorAll('ul li img');
bigImg：获取大图的元素，假设这个元素的 ID 是bigImg。smallImgs：获取所有小图的元素，这些元素是位于一个无序列表<ul>中的列表项<li>内的图片<img>。
2. 对小图应用事件监听：
smallImgs.forEach(function(smallImg) {
smallImg.onmouseover = function() {
- 通过
forEach遍历所有的小图（smallImgs）。 - 对于每一个小图，设置
onmouseover事件，即当鼠标悬停在小图上时触发的函数。
3. 清除所有 li 的 active 类：
document.querySelectorAll('ul li').forEach(function(li) {
li.classList.remove('active');
});
- 在鼠标悬停时，先清除所有列表项（
li）的active类名，确保只保留当前被悬停的图像的样式。
4. 修改大图的 src 属性：
var smallImgSrc = this.getAttribute('src');
bigImg.setAttribute('src', smallImgSrc);
this代表当前悬浮的小图对象。通过getAttribute('src')获取当前小图的src属性。- 将获取到的小图的
src赋值给大图的src，从而实现大图更新。
5. 为当前悬浮的 <img> 的父 <li> 添加 active 类：
this.parentNode.classList.add('active');
- 获取当前小图的父元素（即
<li>），并为其添加active类，以便可以通过 CSS 对该元素进行特殊的样式处理，比如高亮显示。
原文地址：https://blog.csdn.net/2302_77228054/article/details/142439722
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！