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

图片通过滑块小图切换大图放大镜效果显示

news 来源：原创 2025/6/23 22:12:55

图片通过滑块小图切换大图放大镜效果显示

实现目标：

显示一组图片列表，鼠标进入小图记录当下小图下标，通过小图下标在数组中对应图片显示到大图位置；
鼠标进入大图位置时，带动滑块移动，并将放大两倍的大图显示在原大图右边

实现过程：

实现小图切换大图：通过v-for将图片列表绑定在li标签上，同时为li标签添加鼠标监测事件，并绑定事件处理函数 enterHandler，传入图片索引 i 。初始化响应数据 activeIndex记录当前激活索引。通过 v-on加强 li 标签的样式，active激活条件为 i=== activeIndex即当前激活索引与小图索引相同时，左侧大图链接为激活图片索引 imageList[sctiveIndex]。
导入VueUse的 useMouseInElement元素获取鼠标位置，记录鼠标相对位置 elementX、elementY，初始化放大图坐标 positionX、positionY，通过监听器 watch监听鼠标相对位置的变化，小滑块通过 left 、 top控制位置

图中红色正方形为滑块位置，蓝色正方形内为滑块控制的有效范围，需要处理边界（黑色正方形与蓝色正方形的差集）
在这里插入图片描述

控制滑块移动：

// 横向if (elementX.value > 100 && elementX.value < 300) {left.value = elementX.value - 100}// 纵向if (elementY.value > 100 && elementY.value < 300) {top.value = elementY.value - 100}// 处理边界if (elementX.value < 100) {left.value = 0}if (elementX.value > 300) {left.value = 200}if (elementY.value < 100) {top.value = 0}if (elementY.value > 300) {top.value = 200}

控制放大图显示

注意观察，当鼠标在左侧大图移动时，右侧放大图移动方向相反

控制放大图坐标：

 // 控制大图显示positionX.value = -left.value * 2positionY.value = -top.value * 2// 控制放大图图片样式
<divclass="large":style="[{backgroundImage: `url(${imageList[activeIndex]})`,backgroundPositionX: `${positionX}px`,backgroundPositionY: `${positionY}px`,},]"v-show="!isOutside"></div>

在这里插入图片描述

在这里插入图片描述
【注：图片源自淘宝，如有侵权立刻删除】

完整代码

<script setup>
import { useMouseInElement } from '@vueuse/core'
import { ref, watch } from 'vue'// 图片列表
const imageList = ['img/O1CN01HhRDRN1PLRFptsiNY_!!2210715771824.jpg_.webp','img/O1CN01TgHapK1PLRFzgigEa_!!2210715771824.jpg_.webp','img/O1CN015Lpahn1PLRFzgiLRv_!!2210715771824.jpg_.webp','img/O1CN017pJsbA1PLRG0Uk1UI_!!2210715771824.jpg_ (1).webp','img/O1CN017pJsbA1PLRG0Uk1UI_!!2210715771824.jpg_.webp',
]// 小图切换大图
const activeIndex = ref(0)
const enterHandler = (i) => {activeIndex.value = i
}// 获取鼠标相对位置
const target = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(target)// 控制滑块跟随鼠标移动（监听XY变化，变化则重新设计left/top）
const left = ref(0)
const top = ref(0)const positionX = ref(0)
const positionY = ref(0)
watch([elementX, elementY, isOutside], () => {if (isOutside.value) {return}// 有效范围内控制滑块距离// 横向if (elementX.value > 100 && elementX.value < 300) {left.value = elementX.value - 100}// 纵向if (elementY.value > 100 && elementY.value < 300) {top.value = elementY.value - 100}// 处理边界if (elementX.value < 100) {left.value = 0}if (elementX.value > 300) {left.value = 200}if (elementY.value < 100) {top.value = 0}if (elementY.value > 300) {top.value = 200}// 控制大图显示positionX.value = -left.value * 2positionY.value = -top.value * 2
})
</script><template><div class="goods-image"><!-- 左侧大图--><div class="middle" ref="target"><img :src="imageList[activeIndex]" alt="" /><!-- 蒙层小滑块 --><div class="layer" :style="{ left: `${left}px`, top: `${top}px` }"></div></div><!-- 小图列表 --><ul class="small"><liv-for="(img, i) in imageList":key="i"@mouseenter="enterHandler(i)":class="{ active: i === activeIndex }"><img :src="img" alt="" /></li></ul><!-- 放大镜大图 --><divclass="large":style="[{backgroundImage: `url(${imageList[activeIndex]})`,backgroundPositionX: `${positionX}px`,backgroundPositionY: `${positionY}px`,},]"v-show="!isOutside"></div></div>
</template><style scoped lang="scss">
.goods-image {width: 480px;height: 400px;position: relative;display: flex;.middle {width: 400px;height: 400px;background: #f5f5f5;}img {max-width: 100%;max-height: 100%;}.large {position: absolute;top: 0;left: 412px;width: 400px;height: 400px;z-index: 500;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);background-repeat: no-repeat;// 背景图:盒子的大小 = 2:1  控制背景图的移动实现放大的效果background-size: 800px 800px;background-color: #f8f8f8;}.layer {width: 200px;height: 200px;background: rgba(0, 0, 0, 0.2);// 绝对定位left: 0;top: 0;position: absolute;}.small {width: 80px;list-style: none;li {width: 68px;height: 68px;margin-left: 12px;margin-bottom: 15px;cursor: pointer;&:hover,&.active {border: 2px solid pink;}}}
}
* {box-sizing: border-box;
}
</style>

图片通过滑块小图切换大图放大镜效果显示

图片通过滑块小图切换大图放大镜效果显示实现目标： 显示一组图片列表，鼠标进入小图记录当下小图下标，通过小图下标在数组中对应图片显示到大图位置； 鼠标进入大图位置时，带动滑块移动，并将放大两倍的大图…...

编程日记 2025/6/23 22:12:55

[250515] 腾讯推出 AI 编程助手 CodeBuddy，对标 Cursor

目录腾讯推出 AI 编程助手 CodeBuddy 腾讯推出 AI 编程助手 CodeBuddy 腾讯发布 CodeBuddy，一款 AI 编程助手，旨在提升开发者效率。主要亮点： CodeBuddy： 全新英文品牌，面向全球开发者。Craft 模式： A…...

编程日记 2025/6/23 21:21:12

OpenCV光流估计：原理、实现与应用

一、什么是光流？ 光流(Optical Flow)是计算机视觉中描述图像序列中像素运动模式的重要概念。它表示图像中物体在连续帧之间的表观运动，是由物体或相机的运动引起的。光流的基本假设亮度恒常性：同一物体点在连续帧中的亮度保持不变时间持…...

编程日记 2025/6/23 21:14:26

使用 QGIS 插件 OpenTopography DEM Downloader 下载高程数据（申请key教程）

使用 QGIS 插件 OpenTopography DEM Downloader 下载高程数据目录使用 QGIS 插件 OpenTopography DEM Downloader 下载高程数据📌 简介🛠 插件安装方法🌍 下载 DEM 数据步骤🔑 注册 OpenTopography 账号（如使用 Cope…...

编程日记 2025/6/23 20:38:07

【学习资料】视频： https://www.bilibili.com/video/BV1Xh411S7G1?spm_id_from333.788.videopod.episodes&vd_sourcebe26b82da70367069ab00d6db4f4ffc0 文档：https://www.runoob.com/php/php-tutorial.html 目录 1，PHP是什么2&#xff…...

编程日记 2025/6/23 21:43:36

Kotlin 和 Java 混合开发时需要注意哪些问题

1 空安全（Null Safety） Kotlin 有严格的空安全机制（如非空类型的 String 和可空类型 String?），但是 Java 没有： Kotlin 代码调用 Java 代码：Java 中的所有引用类型默认都是可空的&#xff0c…...

编程日记 2025/6/23 20:30:51

乘法口诀练习神器

请你利用python语言开发一个“乘法口诀练习神器”，主要辅助小学生练习乘法口诀，主要功能如下： 1. 能够随机循环出10道题，可以是乘法或者是除法。如果是乘法，确保两个因数都是1-9之间的整数；如果是除法&…...

编程日记 2025/6/23 21:52:48

How to configure Linux mint desktop

Backgrounds apt install mint-backgrounds-*Theme...

编程日记 2025/6/23 21:57:50

【golang】DNS 资源记录（RR）接口

Go 中 miekg/dns 包对 DNS 资源记录（RR）接口的定义： type RR interface {Header() *RR_HeaderString() stringcopy() RRlen(off int, compression map[string]struct{}) intpack(...)unpack(...)parse(...)isDuplicate(r2 RR) bool }这个接…...

编程日记 2025/6/23 20:44:42

Vue中的自定义指令适用于哪些场景

自定义指令在 Vue 中非常灵活且功能强大，它们可以在多种场景中使用，以实现特定的 DOM 操作或行为自定义样式和类自定义指令可以用来动态地添加或修改元素的样式和类。这在需要根据数据动态调整样式时非常有用。 <div id"app"><d…...

编程日记 2025/6/19 22:11:51

边缘计算平台

本文来源 ： 腾讯元宝边缘计算平台是一种在靠近数据源头的网络边缘侧部署的分布式计算架构，通过融合网络、计算、存储和应用核心能力，就近提供实时、低延迟的智能服务。以下是其核心要点： 1. 定义与特点定义&a…...

编程日记 2025/6/23 21:40:51

2025年5月H12-831新增题库带解析

组播基础以下关于PIM-SM(SSM)的描述，错误的是哪一项? PIM-SM(SSM)无需维护RPPIM-SM(SSM)模型形成的组播分发树会一直存在，不会因为没有组播流量而消失PIM-SM(SSM)可以在成员端DR上基于组播源地址直接反向建立SPT在PIM-SM(SSM)中依日需要注册组播源答…...

编程日记 2025/6/23 20:54:31

JavaScript - 运算符之逗号操作符与逗号分隔符（逗号操作符概述、逗号操作符用法、逗号分隔符、逗号分隔符用法）

一、逗号操作符概述【表达式 1】, 【表达式 2】, 【表达式 3】, ..., 【表达式 N】逗号操作符（,）允许在一个语句中从左到右执行多个表达式，并返回最后一个表达式的值二、逗号操作符用法 for 循环中的多变量控制 for (let i 0, j 10; i…...

编程日记 2025/6/23 21:26:56

AM1.5G太阳光模拟器参数

AM1.5G太阳光模拟器的参数通常包括光谱匹配度、空间均匀性、时间稳定性等关键指标，这些参数对于太阳能电池的测试和校准至关重要。以下是AM1.5G太阳光模拟器的主要参数： 光谱匹配度 AM1.5G光谱是指大气质量为1.5时，太阳光在地球表面的光谱分…...

编程日记 2025/6/23 15:40:12

YOLO11解决方案之距离计算探索

概述 Ultralytics提供了一系列的解决方案，利用YOLO11解决现实世界的问题，包括物体计数、模糊处理、热力图、安防系统、速度估计、物体追踪等多个方面的应用。测量两个物体之间的间距被称为特定空间内的距离计算，YOLO11使用两个边界框的中心…...

编程日记 2025/6/23 21:47:36

OkHttp用法-Java调用http服务

特点：高性能，支持异步请求，连接池优化官方文档：提供快速入门指南和高级功能（如拦截器、连接池）的详细说明，GitHub仓库包含丰富示例。社区资源：中文教程丰富，GitHub高…...

编程日记 2025/6/23 20:18:15

c/c++中程序内存区域的划分

c/c程序内存分配的几个区域： 1.栈区：在执行函数时，函数内局部变量的存储单元都可以在栈上创建，函数执行结束时这些存储单元自动被释放，栈内存分配运算内置于处理器的指令集中，效率很高但是分配的内存容量有…...

编程日记 2025/6/23 21:03:01

‌JMeter聚合报告中的任务数和并发数区别

‌JMeter聚合报告中的任务数和并发数有本质的区别。‌ 任务数（样本数） 任务数或样本数是指在性能测试中发出的请求数量。例如，如果模拟20个用户，每个用户发送100次请求，那么总的任务数或样本数就是2000次请求‌ 并发…...

编程日记 2025/6/23 16:38:27

70、微服务保姆教程（十三）Docker容器详细讲义

一、关于Docker 1.1为什么要用docker？随着开发的项目越来越复杂，软件越来越多，服务器越来越多，我们在开发和部署的时候会遇到很多问题，比如： 1.不同的应用程序可能会有不同的应用环境，比如Java开发的网站和php开发的网站依赖的软件就不一样，如果把他们依赖的软件都…...

编程日记 2025/6/23 20:11:03

2025年5月-信息系统项目管理师高级-软考高项-成本计算题

成本计算题挣值分析、成本计算题如何学?1、PV，EV，AC需要理解，根据题目给出的一些个条件需要求得这些值;2、CV，SV，CPI，SPI公式必须记住，需要根据求得的值判断项目的进度和成本的执行情况&#x…...

编程日记 2025/6/23 21:35:21

【BotSharp详细介绍——一步步实现MCP+LLM的聊天问答实例】

BotSharp详细介绍——一步步实现MCPLLM的聊天问答实例一、MCP原理介绍二、创建BotSharp的项目，实现LLM推理机器人1、新建一个解决方案，结构如下：2、先看下 MyWeatherPlugin3、创建MyWeatherMcpAPI 三、创建 MCP Server1、添加引用2、添加工…...

编程日记 2025/6/23 13:04:35

[Linux性能优化] 线程卡顿优化。Linux加入USB（HID）热插拔线程占用CPU优化。Linux中CPU使用率过高优化

文章目录 [Linux性能优化] 线程卡顿优化。一、问题定位：CPU 资源分析二、线程卡顿现场复现线程优化前图片线程优化后图片 [Linux性能优化] 线程卡顿优化。一、问题定位：CPU 资源分析线程卡顿通常与 CPU 资源竞争、线程调度异常相关，第一步…...

编程日记 2025/6/23 22:07:38

鸿蒙OSUniApp 开发的文件上传与下载功能#三方框架 #Uniapp

使用 UniApp 开发的文件上传与下载功能前言在移动应用开发中，文件上传与下载是非常常见且重要的功能需求。无论是上传用户头像、提交表单附件，还是下载资源文件、缓存图片，这些需求几乎存在于每一个成熟的应用中。UniApp 作为一个跨平台开…...

编程日记 2025/6/23 16:18:24

【MySQL】基础知识

MySQL(一)基础知识 MySQL 一、结构 1.客户端 2.服务器分布式系统二、存储 1.空间 1.1内存 1.1.1速度 1.1.2稳定性 1.1.3大小 1.1.4使用 1.2硬盘 1.2.1速度 1.2.2稳定性 1.2.3大小 1.2.4【Java学习】反射-CSDN博客 2.体系表-数据库-服务器 3.特点 3.1…...

编程日记 2025/6/23 21:55:09

产品销量数据爬虫通用模板

最近遇到各行各业的需要爬取销售数据，每次写一个教程相对麻烦，所以思前考后我还是觉得写一个通用模板更适合。所以模板需要足够的灵活性，让用户能够自定义选择器。比如，产品标题、价格、销量的CSS选择器可能因网站而异&#xff0c…...

编程日记 2025/6/22 5:25:05

一文讲透 Vue3 + Three.js 材质属性之皮革篇【扫盲篇】

文章目录前言一、Three.js材质系统基础1.1 为什么选择PBR材质？1.2 关键参数解析二、不同类型皮革的材质配置2.1 牛皮材质实现2.2 羊皮材质实现2.3 仿皮材质实现三、高级贴图技术3.1 贴图制作流程3.2 组合贴图实战四、性能优化策略4.1 贴图压缩技术4.2 材质共享4…...

编程日记 2025/6/23 1:37:12

mysql读写分离

一、读写分离原理客户端连接代理层，代理层（中间件）来实现读操作给从服务器，写操作给主服务器。二、示例 mycat实现读写分离读写分离在主从复制的基础上 1客户机1代理1主2从1、网络主 192.168.10.101从1 192.168.10.102从2 …...

编程日记 2025/6/3 8:34:00

Java集合框架

集合概念：对象的容器，定义了对多个对象进行操作的常用方法。可实现数组的功能和数组的区别数组长度固定，集合长度不固定数组可以存储基本类型和引用类型，集合只能存储引用类型位置：java.util.* Collection体…...

编程日记 2025/6/23 11:15:18

salesforce如何导出所有字段

在 Salesforce 中，导出所有字段信息（包括字段名、API 名、字段类型、是否可报表、是否可搜索等）通常不是一个“一键完成”的操作，但可以通过几种方法实现。以下是常用的几种方法： ✅ 方法一：使用 Salesforc…...

编程日记 2025/6/23 17:28:49

一招解决Tailwindcss4.x与其他库样式冲突问题

当项目中引入tailwindcss，并与其他UI库混用时，可能会出现样式冲突问题，因为tailwindcss重置了一些基础样式，例如：引入tailwindcss后，原生button按钮没有了默认的样式。在老版本中解决这个问题&#xff0c…...

编程日记 2025/6/23 8:53:34

[Harmony]封装一个可视化的数据持久化工具

1.添加权限在module.json5文件中添加权限 // 声明应用需要请求的权限列表 "requestPermissions": [{"name": "ohos.permission.DISTRIBUTED_DATASYNC", // 权限名称：分布式数据同步权限"reason": "$string:distrib…...

编程日记 2025/6/23 1:45:34

关于AI人工智能的知识图谱简介

人工智能是计算机科学的一个重要领域，旨在理解和构建智能行为。人工智能可以被划分为多个子领域或分支，包括机器学习、深度学习、自然语言处理（Natural Language Processing，NLP）、计算机视觉（Computer Vis…...

编程日记 2025/6/20 13:26:01

uniapp，小程序中实现文本“展开/收起“功能的最佳实践

文章目录示例需求分析实现思路代码实现1. HTML结构2. 数据管理3. 展开/收起逻辑4. CSS样式优化技巧1. 性能优化2. 防止事件冒泡3. 列表更新处理实际效果总结在移动端应用开发中，文本内容的"展开/收起"功能是提升用户体验的常见设计。当列表项中包含大…...

编程日记 2025/6/22 22:29:39

RabbitMQ 消息模式实战：从简单队列到复杂路由（一）

RabbitMQ 初相识在当今分布式系统大行其道的技术领域中，消息队列作为实现系统间异步通信、解耦以及流量削峰的关键组件，发挥着不可或缺的作用。而 RabbitMQ，无疑是消息队列领域中一颗耀眼的明星。自 2007 年诞生以来，RabbitMQ 凭…...

编程日记 2025/6/2 23:43:44

阿里云ECS部署Dify

一：在ECS上面安装Docker 关防火墙 sudo systemctl stop firewalld 检查防火墙状态 systemctl status firewalld sudo yum install -y yum-utils device-mapper-persistent-data lvm2 设置阿里镜像源，安装并启动docker [base] nameCentOS-$releas…...

编程日记 2025/5/31 4:27:46

Missashe考研日记—Day37-Day43

Missashe考研日记—Day37-Day43 写在面前本系列博客用于记录博主一周的学习进度，具体知识总结在目前已有的笔记中： 1.高数强化学习笔记2.计网复习笔记本周五到周日有其他安排，所以今天就把这一周的先更新了。专业课408 这周学了计网的…...

编程日记 2025/6/23 17:46:09

DB-GPT扩展自定义app配置说明

简介文章主要介绍了如何扩展一个自定义app插件，这里先看下生成效果，生成的内容其实还是有问题的，后续博主会调整提示词看看能不能优化生成效果修改代码代码详情 # chat_di是从chat_normal复制过来的，这里只改了提示词 from d…...

编程日记 2025/6/3 10:17:33

2025年11月软考各科目难度及适合人群分析

2025上半年软考考试报名已结束，不少小伙伴已经在咨询下半年的考试科目了，今天就给大家推荐几个好考的科目。一、2025下半年软考考试科目 2025下半年软考考试时间为11月8日至11日。根据计考办发布的《关于2025年度计算机技术与软件专业技术资格&…...

编程日记 2025/6/22 9:37:59

vue异步导入

vue的异步导入大家开发vue的时候或多或少路由的异步导入 component: () >import(“/views/A_centerControl/intelligent-control/access-user-group”),当然这是路由页面，那么组件也是可以异步导入的使用方式组件的异步导入非常简单，主要是一个…...

编程日记 2025/5/29 11:16:27

[IMX] 03.时钟树 - Clock Tree

目录 1.PLL 时钟源 2.Clock Tree 时钟树 3.ARM 内核时钟 3.1.频率设置 - CCM_ANALOG_PLL_ARMn 3.2.时钟分频 - CCM_CACRR 3.3.时钟源选择 - CCM_CCSR 3.4.修改 ARM 内核时钟 4.PFD 时钟 4.1.PLL2_PFD 频率 - CCM_ANALOG_PFD_528n 4.2.PLL3_PFD 频率 - CCM_ANALOG_PFD…...

编程日记 2025/6/22 13:56:58

低功耗实现方法思路总结

1.硬件选型最重要，比如stm 8l ，MSP430，瑞萨rl78,lpc11等 2.开发仿真务必使用高精度万用表如fluke 3.在整体规划层面，避免引脚未配置的浮空状态 a)在设计开发层面，对于使用的信号，使用上下拉电阻或者推挽…...

编程日记 2025/6/22 12:41:42

广州SMT贴片技术优势与工艺解析

内容概要作为电子制造领域的关键技术，广州SMT贴片工艺凭借其高精度与高效性，已成为现代电子装配的核心支撑。本文通过系统性梳理表面贴装技术（SMT）的全流程，重点聚焦广州地区在该领域的独特技术优势。内容涵盖从焊膏…...

编程日记 2025/6/20 8:33:28

乡村地区无人机医药配送路径规划与优化仿真

本代码意在通过对无人机路径规划和载具选择进一步帮助乡村振兴，提高农村卫生条件，让患者足不出户就可享受到医疗服务，旨在完善乡村基础设施建设，积极响应国家“十四五”规划的号召。先选择适合在该地区配送医药物资环境下的载具材…...

编程日记 2025/6/23 11:29:20

AWS Elastic Beanstalk部署极简Spring工程（EB CLI失败版）

弃用这里我没有走通EB CLI方式部署。问题最近又加入了AWS项目组，又要再次在AWS云上面部署Spring服务，我这里使用的使用AWS中国云。需要使用AWS Elastic Beanstalk部署一个极简Spring工程。 EB CLI安装安装EB CLI之前需要先在本地安装好Git&…...

编程日记 2025/6/23 7:19:30

[训练和优化] 3. 模型优化

👋 你好！这里有实用干货与深度分享✨✨ 若有帮助，欢迎： 👍 点赞 | ⭐ 收藏 | 💬 评论 | ➕ 关注 ，解锁更多精彩！ 📁 收藏专栏即可第一时间获取最新推送🔔…...

编程日记 2025/6/1 22:57:57

element-ui的el-cascader增加全选按钮实现（附源码）

最近遇到了在级联选择器上添加全选框的需求 ，但是项目使用的是Vue2 Element UI的架构，而我们都知道Element UI提供的级联选择器el-cascader是不支持全选框的，而我又没有在网上找到适合我项目的实现，索性自己实现一个组件&#xf…...

编程日记 2025/6/22 13:40:29

OpenCV人脸识别EigenFace算法、案例解析

文章目录前言一、EigenFace 核心原理二、Python 实战：手把手搭建 EigenFace 识别系统1. 环境准备2. 代码实现与步骤详解3. 加载数据集函数4. 训练EigenFace模型函数5. 预测函数6.主程序部分7. 可视化结果8. 代码分步解读三、优化技巧四、总结前言在人脸识别领域…...

编程日记 2025/6/2 1:54:12