Vue 鼠标滚轮缩放图片的实现
@wheel="handleZoom" 监听鼠标滚轮事件
event.deltaY < 0 代表向上滚动
event.deltaY > 0 代表向下滚动
使用computed处理scale比例的变化
const imageStyle = computed(() => ({
transform: `translate(-50%, -50%) scale(${scale.value})`,
}));
- 利用 computed 计算 scale:通过 scaleOffset 控制缩放比例,scale 由计算属性动态计算,避免了直接修改 scale 的值。
- scalePercentage 动态计算:缩放百分比通过 computed 动态计算,实时反映当前缩放比例。
- watch 监听 scale 的变化:使用 watch 来监听 scale 的变化,自动显示并在 1 秒后隐藏缩放百分比,减少了不必要的手动定时器管理。
<template><!-- 图片 --><div class="img_bigbox" @wheel="handleZoom"><img :style="imageStyle" src="/img/tibet-2.jpg" ref="image" /><div class="scale-indicator" v-if="show">{{ scalePercentage }}%</div></div>
</template><script setup>
import { ref, computed } from "vue";
const show = ref(false);
// 获取图片元素引用
const image = ref(null);
// 定义初始缩放比例
const scale = ref(1);// 设置缩放增量
const zoomIncrement = 0.07;// 计算图片的样式
const imageStyle = computed(() => ({transform: `translate(-50%, -50%) scale(${scale.value})`,
}));// 显示缩放比例(转换为百分比)
const scalePercentage = computed(() => Math.round(scale.value * 100));// 图片缩放处理函数
const handleZoom = (event) => {show.value = true;// 设置定时器setTimeout(() => {show.value = false;}, 1000);// 判断滚动方向并设置新的缩放比例if (event.deltaY < 0) {// 向上滚动scale.value += zoomIncrement;} else {// 向下滚动scale.value -= zoomIncrement;scale.value = Math.max(scale.value, 0.3); // 确保最小缩放比例为0.3}
};
</script><style scoped>
.img_bigbox img {height: 300px;position: absolute;left: 50%;top: 50%;transition: transform 0.2s ease; /* 平滑缩放 */
}.scale-indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.7);color: white;padding: 5px 10px;border-radius: 3px;font-size: 14px;text-align: center;
}
</style>
相关文章:
Vue 鼠标滚轮缩放图片的实现
wheel"handleZoom" 监听鼠标滚轮事件 event.deltaY < 0 代表向上滚动 event.deltaY > 0 代表向下滚动 使用computed处理scale比例的变化 const imageStyle computed(() > ({ transform: translate(-50%, -50%…...
全景图 与 6面图转换
目录 全景图转6面图: 6面图转全景图 全景图转6面图: https://github.com/springcheese/panoramic_to_cubemap_generation # Necessary Imports import math import argparse import numpy as np from PIL import Image# Dictionary for CUBEMAP FACES…...
深入浅出:PHP 文件操作
文章目录 引言文件的基本操作打开文件读取文件逐行读取读取整个文件 写入文件追加写入覆盖写入 关闭文件 文件和目录的管理检查文件或目录是否存在创建和删除文件创建和删除目录复制和移动文件 处理文件权限设置文件权限获取文件权限 处理文件属性获取文件大小获取文件最后修改…...
116. UE5 GAS RPG 实现击杀掉落战利品功能
这一篇,我们实现敌人被击败后,掉落战利品的功能。首先,我们将创建一个新的结构体,用于定义掉落体的内容,方便我们设置掉落物。然后,我们实现敌人死亡时的掉落函数,并在蓝图里实现对应的逻辑&…...
【批处理脚本】更改Windows系统中的 hosts 解析文件
概述 作用 修改 Windows 系统中的 hosts 文件,可以实现 插入 或 删除 条目。该脚本允许用户以管理员权限执行,将特定的域名解析到指定的 IP 地址 应用场景 非常适用于需要频繁或批量修改 hosts 文件的场景: 屏蔽网站、域名重定向、DNS 污染防…...
fastDFS
docker 部署fastDFS docker pull delron/fastdfs docker-compose.yml version: 3services:fastdfs_tracker:image: delron/fastdfs:latestcontainer_name: trackerhostname: trackernetwork_mode: hostports:- "22122:22122"volumes:- ./data/tracker:/var/fdfsco…...
【Linux】存储
声明:以下内容均来学习自《Linux就该这么学》一书 Linux系统中的一切文件都是从“根(/)”目录开始的,并按照文件系统层次化标准(FHS)采用树形结构来存放文件,以及定义了常见目录的用途。此外,Linux系统中的…...
hadoop单机安装
步骤 1:安装 Java 安装 OpenJDK bash sudo yum install -y java-1.8.0-openjdk 验证 Java 安装 bash java -version 输出类似以下内容表示成功: arduino openjdk version “1.8.0_xxx” 步骤 2:下载 Hadoop 下载 Hadoop 安装包 前往 Hadoop 官方下载页面,获取最新稳…...
产品批量分类设置——未来之窗行业应用跨平台架构
一、批量统计分类 提高效率 节省时间:当商品数量庞大时,手动逐个修改商品分类是一项极其耗时的任务。例如,一个电商平台有数千种商品,如果手动操作,可能需要花费数天甚至数周的时间来完成分类转移。而批量设置功能可以…...
2024年中国各省份碳相关投资分析:区域差异与未来趋势
随着中国“双碳”目标的推进,各省份的碳相关投资逐渐成为推动绿色经济转型的关键力量。2024年,各地的双碳项目进入了快速发展阶段,尤其是在清洁能源、绿色技术和碳捕集领域。本文将分析中国各省份在碳减排、碳中和目标实现过程中的投资重点和…...
【六足机器人】03步态算法
温馨提示:此部分内容需要较强的数学能力,包括但不限于矩阵运算、坐标变换、数学几何。 一、数学知识 1.1 正逆运动学(几何法) 逆运动学解算函数 // 逆运动学-->计算出三个角度 void inverse_caculate(double x, double y, …...
路由VueRouter的基本使用
1.下载VueRouter到当前工程。 vue2:VueRouter3.x Vuex3.x。 vue3:VueRouter4.x Vuex4.x。 在终端使用命令: year add vue-router3.6.5 2.引入。 import VueRouter from vue-router 3,安装注册。 Vue.use(VueRouter) 4…...
Guiding a Diffusion Model with a Bad Version of Itself
Guiding a Diffusion Model with a Bad Version of Itself Abstract1. Introduction2. Background3. Why does CFG improve image quality?Score matching leads to outliers.CFG 消除异常值Discussion 4 Our method Abstract 在图像生成扩散模型中,主要关注的轴心…...
快速上手!低功耗Air724UG模组软件指南:FTP示例
Air724UG模组集成了高性能处理器和丰富的外设接口,支持多种通信协议,包括FTP(文件传输协议)。通过Air724UG模组,开发者可以轻松实现设备的远程文件管理功能。一起接着看下去吧! 一、简介 FTP(…...
GAMES101 完结篇(笔记和作业)
写在前面 我已经把笔记和作业代码放在了GitHub上,欢迎访问GAMES101笔记及作业 (github.com),如果对你有帮助,欢迎fork or star 下面我想简单介绍一下这里面的东西 Homework Homework文件夹里有0~8的作业框架,参考的其他大佬的代…...
3D Slicer与MONAI人工智能三维影像处理
如何又快又高效的做三维影像?勾画roi? 案例1 患者腹腔占位半月余,完善CT增强扫描,使用Slicer 对肿瘤,胰腺,动脉,静脉进行三维重建。重建时间1-5分钟。 案例2 胸部CT平扫,使用 slic…...
NC65客开单据自定义项处理以及自定义项相关介绍(超级详细带图以及代码NC65自定义项大全)
自定义项教程 自定义项和物料辅助属性简介 自定义档案的概念: NC系统中有大量的档案,这些档案中有相当一部分为系统预置的,鉴于用户对系统应用的个性化需求,系统支持用户自定用户自己的档案,并对其进行维护管理&…...
责任链模式的理解和实践
责任链模式(Chain of Responsibility)是行为型设计模式之一,它通过将多个对象连成一条链,并沿着这条链传递请求,直到有对象处理它为止。这个模式的主要目的是将请求的发送者和接收者解耦,使请求沿着处理链传…...
【大模型-向量库】详解向量库管理:连接管理、集合管理、向量管理
在向量数据库(Vector Database)中,向量库管理的概念是非常重要的,因为它涉及到如何高效地存储、索引和检索大规模的向量数据。向量库管理通常包括三个主要方面:连接管理、集合管理和向量管理。以下是对这三者的详细解释…...
MySQL书籍推荐
《高性能MySQL(第4版)》-西尔维亚博特罗斯 系统层次 Mysql性能优化和高可用架构实践 2020 系统基础 MySQL性能调优与架构设计 系统基础 Mysql技术大全 2021 综合 MySQL数据库应用案例教程 综合实战 从入门到项目实践 综合实战 丰富 超值 MySQ…...
Beyond Compare 5 本地密钥生成实用方案:告别试用限制的完整指南
Beyond Compare 5 本地密钥生成实用方案:告别试用限制的完整指南 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen Beyond Compare 5 作为一款专业的文件对比工具,在试用期…...
郭老师-最高级的活法:不渡无缘之人
最高级的活法 ——不干涉他人的因果“说教只会引来仇恨, 疼痛才是最好的老师。”🌿 真正的慈悲, 不是拉人上岸, 而是—— 允许他沉下去,再自己浮起来。⚖️ 一、四大悲哀:强行渡人,反被拖下水行…...
5个简单步骤掌握LiteDB.Studio:免费开源的LiteDB数据库终极GUI管理工具
5个简单步骤掌握LiteDB.Studio:免费开源的LiteDB数据库终极GUI管理工具 【免费下载链接】LiteDB.Studio A GUI tool for viewing and editing documents for LiteDB v5 项目地址: https://gitcode.com/gh_mirrors/li/LiteDB.Studio 在当今数据驱动的软件开发…...
如何在ComfyUI中智能合成视频序列:VHS_VideoCombine节点的专业应用方案
如何在ComfyUI中智能合成视频序列:VHS_VideoCombine节点的专业应用方案 【免费下载链接】ComfyUI-VideoHelperSuite Nodes related to video workflows 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-VideoHelperSuite 面对AI生成的大量图像序列&…...
COMSOL相场法模拟多条裂纹扩展的复杂水力行为
COMSOL 相场法水力裂纹扩展,多条裂纹扩展在模拟地质工程中的水力压裂过程时,相场法凭借其无需预设裂纹路径的优势成为热门选择。今天咱们就手把手在COMSOL里折腾个带流体压力的多裂纹扩展模型,过程中会遇到几个坑位需要注意。先看核心控制方程…...
通义千问1.8B-Chat部署教程:Supervisor管理服务,稳定运行不中断
通义千问1.8B-Chat部署教程:Supervisor管理服务,稳定运行不中断 1. 项目概述 通义千问1.5-1.8B-Chat-GPTQ-Int4是阿里云推出的轻量级对话模型,经过GPTQ-Int4量化后,显存需求仅约4GB,非常适合在消费级GPU或边缘设备上…...
避坑指南:微信小程序递归组件的3个常见错误(以tree组件为例)
微信小程序递归组件开发避坑指南:以Tree组件为例 递归组件是前端开发中处理嵌套数据结构的利器,但在微信小程序中实现时,不少开发者容易陷入一些典型陷阱。我曾在一个电商后台管理系统项目中,因为递归组件的状态更新问题导致整个商…...
Android Studio中文界面终极配置指南:告别英文障碍,提升开发效率
Android Studio中文界面终极配置指南:告别英文障碍,提升开发效率 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本) 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePac…...
[特殊字符] Nano-Banana效果分享:电动工具齿轮箱高精度啮合关系可视化拆解图
Nano-Banana效果分享:电动工具齿轮箱高精度啮合关系可视化拆解图 你有没有想过,一个复杂的电动工具内部到底长什么样?那些精密的齿轮是如何咬合在一起,将电机的旋转变成强大动力的?传统的产品说明书往往只有一张模糊的…...
用STM32的定时器输入捕获功能,精准解码433MHz遥控器信号(附完整代码)
STM32定时器输入捕获技术解析:433MHz遥控信号精准解码实战 在智能家居DIY和工业控制领域,433MHz无线通信凭借其穿透性强、成本低廉的优势成为常见选择。但如何稳定可靠地解码这些无线信号,一直是开发者面临的挑战。本文将深入探讨基于STM32硬…...
