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',
]

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/80033.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式应用:ELK企业级日志分析系统

目录 一、理论 1.ELK 2.ELK场景 3.完整日志系统基本特征 4.ELK 的工作原理 5.ELK集群准备 6.Elasticsearch部署&#xff08;在Node1、Node2节点上操作&#xff09; 7.Logstash 部署&#xff08;在 Apache 节点上操作&#xff09; 8.Kiabana 部署&#xff08;在 Node1 节点…

什么是全局代理,手机怎么设置全局代理

目录 什么是全局代理 全局代理的优缺点 优点 缺点 手机怎么设置全局代理 注意事项 总结 在计算机网络和信息安全中&#xff0c;全局代理是一种常用的技术手段&#xff0c;用于将网络流量通过代理服务器进行转发和处理。本文将介绍什么是全局代理&#xff0c;探讨全局代理…

使用kubeadm快速部署一个k8s集群

Kubernetes概述 使用kubeadm快速部署一个k8s集群 Kubernetes高可用集群二进制部署&#xff08;一&#xff09;主机准备和负载均衡器安装 Kubernetes高可用集群二进制部署&#xff08;二&#xff09;ETCD集群部署 Kubernetes高可用集群二进制部署&#xff08;三&#xff09;部署…

2020年12月 Python(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

一、单选题 第1题 执行语句print(1010.0)的结果为&#xff1f; A&#xff1a;10 B&#xff1a;10.0 C&#xff1a;True D&#xff1a;False 正确的答案是 C&#xff1a;True。 解析&#xff1a;在Python中&#xff0c;比较运算符 “” 用于比较两个值是否相等。在这个特…

2023 电赛 E 题 激光笔识别有误--使用K210/Openmv/树莓派/Jetson nano实现激光笔在黑色区域的目标检测

1. 引言 1.1 激光笔在黑色区域目标检测的背景介绍 在许多应用领域&#xff0c;如机器人导航、智能家居和自动驾驶等&#xff0c;目标检测技术的需求日益增加。本博客将聚焦于使用K210芯片实现激光笔在黑色区域的目标检测。 激光笔在黑色区域目标检测是一个有趣且具有挑战性的…

20天学会rust(一)和rust say hi

关注我&#xff0c;学习Rust不迷路 工欲善其事&#xff0c;必先利其器。第一节我们先来配置rust需要的环境和安装趁手的工具&#xff0c;然后写一个简单的小程序。 安装 Rust环境 Rust 官方有提供一个叫做 rustup 的工具&#xff0c;专门用于 rust 版本的管理&#xff0c;网…

Linux——设备树

目录 一、Linux 设备树的由来 二、Linux设备树的目的 1.平台识别 2.实时配置 3.设备植入 三、Linux 设备树的使用 1.基本数据格式 2.设备树实例解析 四、使用设备树的LED 驱动 五、习题 一、Linux 设备树的由来 在 Linux 内核源码的ARM 体系结构引入设备树之前&#x…

Android学习之路(1) 文本设置

Android学习之路(1) 文本 一、设置文本内容 设置文本内容的两种方式&#xff1a; 一种是在XML文件中通过属性android:text设置文本代码如下 <TextViewandroid:id"id/tv_hello"android:layout_width"wrap_content"android:layout_height"wrap_c…

蓝桥杯上岸每日N题 第七期(小猫爬山)!!!

蓝桥杯上岸每日N题 第七期(小猫爬山)&#xff01;&#xff01;&#xff01; 同步收录 &#x1f447; 蓝桥杯上岸必背&#xff01;&#xff01;&#xff01;(第四期DFS) 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &a…

python -- 如何将nc数据中的时间转换为北京时区的时间

在nc数据处理时&#xff0c;以ERA5的小时数据为例&#xff0c;使用的时间为UTC&#xff0c;不同时区存在时间上的差异&#xff0c;如何将其转化为北京当地的时间呢? https://confluence.ecmwf.int/display/CKB/ERA5%3Adatadocumentation #!/usr/bin/env python3 # -*- cod…

云原生应用里的服务发现

服务定义&#xff1a; 服务定义是声明给定服务如何被消费者/客户端使用的方式。在建立服务之间的同步通信通道之前&#xff0c;它会与消费者共享。 同步通信中的服务定义&#xff1a; 微服务可以将其服务定义发布到服务注册表&#xff08;或由微服务所有者手动发布&#xff09;…

33.利用abs 解决绝对值问题(matlab程序 )

1.简述 abs函数的功能是绝对值和复数的模 语法 Y abs(X) 说明 Y abs(X) 返回数组 X 中每个元素的绝对值。如果 X 是复数&#xff0c;则 abs(X) 返回复数的模。 示例 标量的绝对值 y abs(-5) y 5 向量的绝对值 创建实值的数值向量。 x [1.3 -3.56 8.23 -5 -0.01…

在线对对联

对对联的起源可以追溯到中国古代,它与中国文化有着密切的关系。 1. 最早的对对联出现在汉朝,当时称为“对句”。它起源于民间,后来逐渐成为文人雅士的精神寄托。 2. 唐代时,对对联的格式更加规范,并被称为“春联”。它成为春节张贴的主要内容,寓意吉祥。 3. 宋代以后,对对联…

关于ETL的两种架构(ETL架构和ELT架构)

ETL&#xff0c;是英文 Extract-Transform-Load 的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程。ETL一词较常用在数据仓库&#xff0c;但其对象…

Spring Boot集成EasyExcel实现excel导入导出操作

文章目录 Spring Boot集成EasyExcel实现excel导入导出操作0 简要说明简单使用读操作excel源文件实体类监听器业务代码 写操作*实体类*excel示例业务代码根据参数指定列导出指定哪几列导出复杂头导出 关于数值型&#xff0c;日期型&#xff0c;浮点型数据解决方案实体类接收字符…

Idea中maven无法下载源码

今天在解决问题的时候想要下载源码&#xff0c;突然发现idea无法下载&#xff0c;这是真的蛋疼&#xff0c;没办法查看原因&#xff0c;最后发现问题的原因居然是因为Maven&#xff0c;由于我使用的idea的内置的Bundle3的Maven&#xff0c;之前没有研究过本地安装和内置的区别&…

音视频技术开发周刊 | 305

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 大神回归学界&#xff1a;何恺明宣布加入 MIT 「作为一位 FAIR 研究科学家&#xff0c;我将于 2024 年加入麻省理工学院&#xff08;MIT&#xff09;电气工程与计算机科学…

特性Attribute

本文只提及常用的特性&#xff0c;更多特性请查看官方文档。 AddComponentMenu - Unity 脚本 API 常用特性 AddComponentMenu 添加组件菜单 使用 AddComponentMenu 属性可在“Component”菜单中的任意位置放置脚本&#xff0c;而不仅是“Component > Scripts”菜单。 使用…

线程池优雅关闭

背景 线程池是日常我们写代码时经常打交道的知识点了&#xff0c;围绕线程池除了core核心线程数和最大max线程数的知识点外&#xff0c;我们一般会忽略然而却绕不开的问题时如何关闭线程池 如何关闭线程池 首先从优雅关闭线程池代码说起&#xff1a; public boolean graful…

ESP32学习笔记(52)————三轴加速度ADXL345使用(SPI方式)

一、简介 ADXL345 是一款 ADI 公司推出的基于 iMEMS 技术的超低功耗3轴加速度计&#xff0c;分辨率高(13位)&#xff0c;测量范围达 16g。数字输出数据为 16 位二进制补码格式&#xff0c;可通过 SPI(3线或4线) 或 I2C 数字接口访问。ADXL345 非常适合移动设备应用。它可以在倾…