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

图像放大效果示例【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 对该元素进行特殊的样式处理,比如高亮显示。
http://www.lryc.cn/news/444232.html

相关文章:

  • 【C#生态园】云端之C#:全面解析6种云服务提供商的SDK
  • 远程升级又双叒叕失败?背后原因竟然是。。。
  • 【测试】——Selenium API (万字详解)
  • Redis:原理+项目实战——Redis实战3(Redis缓存最佳实践(问题解析+高级实现))
  • 刚刚,Stable Diffusion 2024升级,最强Ai绘画整合包、部署教程(解压即用)
  • 【AIGC】ChatGPT提示词助力高效文献处理、公文撰写、会议纪要与视频总结
  • centos7更换国内下载源
  • 【Linux】常用指令【更详细,带实操】
  • 力扣3290.最高乘法得分
  • Python | Leetcode Python题解之第413题等差数列划分
  • 深入理解 ClickHouse 的性能调优与最佳实践
  • Elasticsearch——介绍、安装与初步使用
  • FreeRTOS保姆级教程(以STM32为例)—任务创建和任务控制API说明
  • Go语言现代web开发14 协程和管道
  • Llama3.1的部署与使用
  • Java/Spring项目的包开头为什么是com?
  • 深度学习自编码器 - 随机编码器和解码器篇
  • Spring IoC DI
  • [数据集][目标检测]无人机飞鸟检测数据集VOC+YOLO格式6647张2类别
  • Vue 中 watch 的使用方法及注意事项
  • 情指行一体化平台建设方案和必要性-———未来之窗行业应用跨平台架构
  • 窗口框架frame(HTML前端)
  • 51单片机——数码管
  • `re.compile(r“(<.*?>)“)` 如何有效地从给定字符串中提取出所有符合 `<...>` 格式的引用
  • 算法打卡:第十一章 图论part01
  • 为C#的PetaPoco组件增加一个批量更新功能(临时表模式)
  • Spring实战——入门讲解
  • MTK芯片机型的“工程固件” 红米note9 5G版资源预览 写入以及改写参数相关步骤解析
  • [Golang] Context
  • 【JAVA集合总结-壹】