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

Vue3 实现产品图片放大器

Vue3 实现类似淘宝、京东产品详情图片放大器功能
环境:vue3+ts+vite

1.创建picShow.vue组件

<script lang="ts" setup>
import {ref, computed} from 'vue'
import {useMouseInElement} from '@vueuse/core'/*获取父组件的传值*/
defineProps<{images: string[]
}>()
// 当前显示的图片索引
let active = ref(0)
// ref 获取 DOM 元素的位置
const target = ref(null)
// isisOutside为 true 的时候代表鼠标未进入目标元素,为 false 时代表鼠标进入目标元素
const {elementX, elementY, isOutside} = useMouseInElement(target)
// 遮罩半透明图在商品大图中的坐标位置
const position = computed(() => {let x = elementX.value - 70let y = elementY.value - 70if (x <= 0) x = 0if (x >= 140) x = 140if (y <= 0) y = 0if (y >= 140) y = 140return {x, y}
})
</script>
<template><div class="product-image"><!-- 放大 --><div class="large" :style="[{ backgroundImage: `url(${images[active]})`,backgroundPosition: `-${position.x * 2}px -${position.y * 2}px`}]" v-show="!isOutside"></div><div ref="target" class="middle"><img :src="images[active]" alt=""/><!-- 遮罩层 --><div class="layer" v-show="!isOutside" :style="{ left: `${position.x}px`, top: `${position.y}px` }"></div></div><ul class="small"><li v-for="(item, index) in images" :key="item":class="{ active: index === active }"@mouseenter="active = index"><img :src="item" alt=""/></li></ul></div>
</template><style lang="scss" scoped>
.product-image {position: relative;z-index: 500;.large {position: absolute;top: 0;left: 290px;width: 500px;height: 500px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);background-repeat: no-repeat;background-size: 156% 156%;background-color: #f8f8f8;}.middle {width: 280px;height: 280px;background: #f5f5f5;position: relative;cursor: move;.layer {width: 140px;height: 140px;background: rgba(0, 0, 0, 0.2);left: 0;top: 0;position: absolute;}img{width: 280px;height: 280px;}}.small {width: 280px;display: flex;margin-top: 5px;li {width: 70px;height: 70px;cursor: pointer;list-style: none;img{width: 70px;height: 70px;}}}
}
</style>

2.在其他页面引用组件picShow.vue

<div class="product-info"><div class="media"><PicShow :images="picList"/></div>
</div>//js部分
import PicShow from "@/components/picShow.vue";
const picList=['/src/assets/images/contactus01.jpg','/src/assets/images/contactus02.jpg','/src/assets/images/contactus03.jpg','/src/assets/images/contactus04.jpg',
]

效果:
在这里插入图片描述

相关文章:

Vue3 实现产品图片放大器

Vue3 实现类似淘宝、京东产品详情图片放大器功能 环境&#xff1a;vue3tsvite 1.创建picShow.vue组件 <script lang"ts" setup> import {ref, computed} from vue import {useMouseInElement} from vueuse/core/*获取父组件的传值*/ defineProps<{images:…...

机器学习笔记 - 使用 YOLOv5、O​​penCV、Python 和 C++ 检测物体

一、YOLO v5简述 YOLO v5虽然已经不是最先进的对象检测器,但是YOLOv5 使用了一个简单的卷积神经网络 CNN架构(相对YOLO v8来讲,不过v8精度是更高了一些),更易理解。这里主要介绍如何轻松使用 YOLO v5来识别图像中的对象。将使用 OpenCV、Python 和 C++ 来加载和调用我们的…...

使用手机相机检测电脑屏幕刷新率Hz

使用手机相机检测电脑屏幕刷新率Hz 1、电脑打开https://www.testufo.com/frameskipping 2、相机专业模式&#xff1a;快门1/10、ISO自动&#xff0c;拍摄一张照片。120Hz至少要有12个亮块&#xff0c;50Hz至少有6个亮块。 更改刷新速率 1、选择 “开始>设置>系统>显示…...

修改k8s pod的挂载目录

1、找到挂载的服务 kubectl get service2、编辑pod的环境配置 kubectl edit deployment vendor-basic-bill-executor3、找到需要挂载的目录...

Vue3+SpringBoot快速开发模板

起因&#xff1a;个人开发过程经常会使用到Vue3SpringBoot技术栈来开发项目&#xff0c;每次在项目初始化时都需要涉及一些重复的整理工作&#xff0c;于是结合一些个人觉得不错的前后端模板进行整合&#xff0c;打通一些大多数项目都需要的实现的基础功能&#xff0c;以便于快…...

CSDN竞赛68期

CSDN竞赛68期 CSDN竞赛68期1.小球游戏2.王子闯闸门分析 CSDN竞赛68期 1.小球游戏 这个是64期的题目&#xff0c;完全一样&#xff0c;有点无语了&#xff0c;竟然又出了&#xff0c;真不知道怎么出的题。 参考&#xff1a;CSDN周赛64期 2.王子闯闸门 波斯王子要去救被贾法尔…...

Redis入门

目录 一、Redis简介 二、主要特点 三 、Redis的下载与安装 1.2.1 Redis下载 1.2.2 Redis安装 1.3 Redis服务启动与停止 1.3.1 服务启动命令 1.3.2 客户端连接命令 1.3.3 修改Redis配置文件 1.3.4 Redis客户端图形工具 一、Redis简介 Redis是一个基于内存的key-value…...

[CrackMe]BuLLeT.exe的逆向及注册机编写

Delphi写的, 其实这个crackme很弱鸡, 但我还是花了好几个小时逆向, 一来是因为我第一次逆向delphi程序, 二来里面有很多转换函数, 我以为是加密函数, 结果一个个分析花了很多时间。但感觉学到了不少。 查壳发现加了一个WWPACK壳(没见过这种壳)。 进去之后不是在ntdll.dll里面,…...

C++ 中 int、short、long和long long 分别是几位?有符号无符号有什么区别?

在C中&#xff0c;不同的数据类型表示不同范围的整数值。以下是各种整数数据类型的位数和范围&#xff1a; int: 通常为32位&#xff0c;表示带符号的整数&#xff0c;范围约为 -2,147,483,648 到 2,147,483,647。 short: 通常为16位&#xff0c;表示带符号的短整数&#xff0…...

Killing LeetCode [82] 删除排序链表中的重复元素 II

Description 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 Intro Ref Link&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-list-ii/ Difficulty&#xff1a;Medium T…...

LeetCode 热题 100 JavaScript--283. 移动零

给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 2: 输入: nums [0] 输出:…...

java读写ini文件

java读写ini文件 1、格式 INI文件由节、键、值组成。 节 [section] 参数 &#xff08;键值&#xff09; namevalue 例&#xff1a; [Total] num1 [Server] ip127.0.0.1 2、代码封装 import org.apache.commons.configuration.ConfigurationException; import org.apache.common…...

【ARM Coresight 系列文章 2.3 - Coresight 寄存器】

文章目录 Coresight 寄存器介绍1.1 ITCTRL&#xff0c;integration mode control register1.2 CLAIM寄存器1.3 DEVAFF(Device Affinity Registers)1.4 LSR and LAR1.5 AUTHSTATUS(Authentication Status Register) Coresight 寄存器介绍 Coresight 对于每个 coresight 组件&am…...

kafka:java client使用总结塈seek() VS commitSync()的区别(三)

最近一段日子接触了kafka这个消息系统&#xff0c;主要为了我的开源中间件项目simplemq增加kafka支持&#xff08;基于kafka-client【java】&#xff09;&#xff0c;如今总算完成&#xff0c;本文是对这个过程中对kafka消息系统的使用总结 线程安全 关于线程安全&#xff0c…...

如何用正确的姿势监听Android屏幕旋转

作者&#xff1a;37手游移动客户端团队 背景 关于个人&#xff0c;前段时间由于业务太忙&#xff0c;所以一直没有来得及思考并且沉淀点东西&#xff1b;同时组内一个个都在业务上能有自己的思考和总结&#xff0c;在这样的氛围下&#xff0c;不由自主的驱使周末开始写点东西&…...

mysql高级三:sql性能优化+索引优化+慢查询日志

内容介绍 单表索引失效案例 0、思考题&#xff1a;如果把100万数据插入MYSQL &#xff0c;如何提高插入效率 &#xff08;1&#xff09;关闭自动提交&#xff0c;只手动提交一次 &#xff08;2&#xff09;删除除主键索引外其他索引 &#xff08;3&#xff09;拼写mysql可以执…...

HCIP VLAN--Hybrid接口

一、VLAN的特点 1、一个VLAN就是一个广播域&#xff0c;所以在同一个VLAN内部&#xff0c;计算机可以直接进行二层通信&#xff1b;而不同VLAN内的计算机&#xff0c;无法直接进行二层通信&#xff0c;只能进行三层通信来传递信息&#xff0c;即广播报文被限制在一个VLAN内。 …...

大数据开发面试必问:Hive调优技巧系列二

接上次分享的Hive调优技巧系列一&#xff1a; 数据倾斜、HiveJob优化 第1章 数据倾斜&#xff08;重点&#xff09; 绝大部分任务都很快完成&#xff0c;只有一个或者少数几个任务执行的很慢甚至最终执行失败&#xff0c;这样的现象为数据倾斜现象。 一定要和数据过量导致的…...

【C++】STL——list的模拟实现、构造函数、迭代器类的实现、运算符重载、增删查改

文章目录 1.模拟实现list1.1构造函数1.2迭代器类的实现1.3运算符重载1.4增删查改 1.模拟实现list list使用文章 1.1构造函数 析构函数 在定义了一个类模板list时。我们让该类模板包含了一个内部结构体_list_node&#xff0c;用于表示链表的节点。该结构体包含了指向前一个节点…...

vscode 插件::EIDE

最新最全 VSCODE 插件推荐&#xff08;2023版&#xff09;_vscode_白墨石-华为云开发者联盟 (csdn.net) 超好用的开发工具-VScode插件EIDE_vscode eide_桃成蹊2.0的博客-CSDN博客 Setup | Embedded IDE For VSCode (em-ide.com)...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

2.2.2 ASPICE的需求分析

ASPICE的需求分析是汽车软件开发过程中至关重要的一环&#xff0c;它涉及到对需求进行详细分析、验证和确认&#xff0c;以确保软件产品能够满足客户和用户的需求。在ASPICE中&#xff0c;需求分析的关键步骤包括&#xff1a; 需求细化&#xff1a;将从需求收集阶段获得的高层需…...

SFTrack:面向警务无人机的自适应多目标跟踪算法——突破小尺度高速运动目标的追踪瓶颈

【导读】 本文针对无人机&#xff08;UAV&#xff09;视频中目标尺寸小、运动快导致的多目标跟踪难题&#xff0c;提出一种更简单高效的方法。核心创新在于从低置信度检测启动跟踪&#xff08;贴合无人机场景特性&#xff09;&#xff0c;并改进传统外观匹配算法以关联此类检测…...

docker容器互联

1.docker可以通过网路访问 2.docker允许映射容器内应用的服务端口到本地宿主主机 3.互联机制实现多个容器间通过容器名来快速访问 一 、端口映射实现容器访问 1.从外部访问容器应用 我们先把之前的删掉吧&#xff08;如果不删的话&#xff0c;容器就提不起来&#xff0c;因…...