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

图像放大效果示例【JavaScript】

news 2025/9/16 4:44:36

实现效果：

当鼠标悬停在小图（缩略图）上时，大图（预览图）会随之更新为相应的小图，并高亮当前悬浮的小图的父元素。

代码：

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 对该元素进行特殊的样式处理，比如高亮显示。

图像放大效果示例【JavaScript】

实现效果： 当鼠标悬停在小图（缩略图）上时，大图（预览图）会随之更新为相应的小图，并高亮当前悬浮的小图的父元素。代码： 1. HTML部分 <!DOCTYPE html> <html lang"z…...

编程日记 2024/9/23 14:12:53

【C#生态园】云端之C#：全面解析6种云服务提供商的SDK

C#开发者必读：深度比较6种云服务SDK 前言随着云计算技术的迅猛发展，越来越多的企业和开发者选择将应用程序部署到公共云平台上。针对C#开发者而言，各大云服务提供商纷纷推出了适用于C#的SDK，以便开发者能够更轻松地与其云服务进…...

编程日记 2024/9/23 14:11:51

远程升级又双叒叕失败？背后原因竟然是。。。

最近又遇到了远程升级接连失败的情况，耐心和信心都备受折磨！ 事情是这样的：有客户反馈在乡村里频繁出现掉线的情况，不敢耽搁，赶紧联系小伙伴排查测试，最后发现，只有去年某一批模块在当下环境才…...

编程日记 2024/9/23 14:10:50

【测试】——Selenium API （万字详解）

📖 前言：本文详细介绍了如何利用Selenium进行Web自动化测试，包括定位元素（如cssSelector和xpath）、常用操作函数（如点击、输入等）、窗口管理、键盘鼠标事件和浏览器导航，以及处理弹窗…...

编程日记 2024/9/23 14:08:48

Redis：原理+项目实战——Redis实战3（Redis缓存最佳实践（问题解析+高级实现））

👨‍🎓作者简介：一位大四、研0学生，正在努力准备大四暑假的实习 🌌上期文章：Redis：原理项目实战——Redis实战2（Redis实现短信登录（原理剖析代码优化）&#x…...

编程日记 2024/9/23 14:07:47

刚刚，Stable Diffusion 2024升级，最强Ai绘画整合包、部署教程（解压即用）

2024Ai技术大爆发的元年目前两款Ai神器大火一款是大名鼎鼎的Chat GPT 另外一款—Stable Diffusion 堪称全球最强Ai绘画工具 Stable Diffusion Ai绘画2024版本更新啦！ 从4.8.7更新至**4.9版本！**更新优化和大模型增加，无需安装&#xf…...

编程日记 2024/9/23 14:02:40

【AIGC】ChatGPT提示词助力高效文献处理、公文撰写、会议纪要与视频总结

博客主页： [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯高效英文文献阅读提示词使用方法 💯高效公文写作提示词使用方法 💯高效会议纪要提示词使用方法 💯高效视频内容分析提示词使用方法 &a…...

编程日记 2024/9/23 13:58:36

centos7更换国内下载源

📖centos7更换国内下载源在CentOS 7上更换为国内源可以通过替换 /etc/yum.repos.d/CentOS-Base.repo文件来实现。以下是一些常用的国内源以及如何更换的示例： 阿里云源： mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Bas…...

编程日记 2024/9/23 13:57:34

【Linux】常用指令【更详细，带实操】

Linux全套讲解系列，参考视频-B站韩顺平，本文的讲解更为详细目录一、文件目录指令 1、cd【change directory】指令 2、mkdir【make dir..】指令 3、cp【copy】指令 4、rm【remove】指令 5、mv【move】指令 6、cat指令和more指令 7、less和…...

编程日记 2024/9/23 13:53:29

力扣3290.最高乘法得分

力扣3290.最高乘法得分递归记忆化搜索对于b数组，从右往左考虑取不取，如果取则问题变成b[0] ~ b[i-1]间找j - 1个数如果不取，则问题变成b[0] ~ b[i]间找j个数即dfs(i,j) max(dfs(i-1,j) , dfs(i-1,j-1) a[j] * b[i]) 边界&#xff1a…...

编程日记 2024/9/23 13:51:28

Python | Leetcode Python题解之第413题等差数列划分

题目： 题解： class Solution:def numberOfArithmeticSlices(self, nums: List[int]) -> int:n len(nums)if n 1:return 0d, t nums[0] - nums[1], 0ans 0# 因为等差数列的长度至少为 3，所以可以从 i2 开始枚举for i in range(2, n):i…...

编程日记 2024/9/23 13:49:25

深入理解 ClickHouse 的性能调优与最佳实践

1. 介绍 ClickHouse 是一款由 Yandex 开发的开源列式数据库，专为在线分析处理（OLAP）场景设计。它以极高的查询性能著称，尤其适用于大规模数据的快速聚合和分析。自发布以来，ClickHouse 在多个行业中得到了广泛应用&am…...

编程日记 2024/9/23 13:47:23

Elasticsearch——介绍、安装与初步使用

目录 1.初识 Elasticsearch1.1.了解 ES1.1.1.Elasticsearch 的作用1.1.2.ELK技术栈1.1.3.Elasticsearch 和 Lucene1.1.4.为什么不是其他搜索技术？1.1.5.总结 1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引1.2.3.正向和倒排 1.3.Elasticsearch 的一些概念1.3.1.文档和字…...

编程日记 2024/9/23 13:45:19

FreeRTOS保姆级教程（以STM32为例）—任务创建和任务控制API说明

目录一、任务创建： （1）TaskHandle_t 任务句柄 （2） xTaskCreate： 函数原型： 参数说明： 返回值： 示例： 注意事项： 用法示例&#xff1a…...

编程日记 2024/9/23 13:43:15

概述 Concurrency is a paradigm where different parts of the program can be executed in parallel without impact on the final result. Go programming supports several concurrency concepts related to concurrent execution and communication between concurrent e…...

编程日记 2024/9/23 13:42:14

实现效果：

代码：

1. HTML部分

2. CSS部分

3. js部分

方式一：

代码解析：

方式二：

代码解析：

相关文章：