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…...
别再给云存储打工了!手把手教你用飞牛NAS搭建低成本监控中心,守护小店每一分钱。
对于个体商户来说,监控是刚需,但传统的方案要么一次性投入巨大,要么长期订阅云存储费用高昂。本文将介绍一种基于 飞牛NAS 萤石摄像头 的本地化监控方案,旨在帮助商户省钱、好用、省心,实现监控成本的显著降低。&…...
万象视界灵坛应用案例:博物馆数字藏品语义标注系统开发实录
万象视界灵坛应用案例:博物馆数字藏品语义标注系统开发实录 1. 项目背景与挑战 博物馆数字化进程中,海量文物藏品的语义标注一直是个难题。传统方法依赖人工标注,不仅效率低下,而且难以保证一致性。以某省级博物馆为例ÿ…...
Flutter文件操作实战:File_selector跨平台文件处理从入门到精通
1. 为什么Flutter开发者都需要掌握File_selector? 在移动应用和桌面应用开发中,文件操作就像我们日常生活中的"文件柜"——你需要存放、查找、整理各种文档。而Flutter作为跨平台框架,最大的挑战就是如何在不同操作系统上实现统一的…...
从零搭建PointRCNN:Linux环境配置与3D检测可视化实战
1. 环境准备:从零搭建Linux深度学习工作站 第一次在Linux系统上配置深度学习环境时,我盯着命令行界面手足无措的样子还历历在目。现在回想起来,其实只要掌握几个关键步骤,就能快速搭建好PointRCNN所需的运行环境。我们以配备NVIDI…...
3个秘诀让城通网盘下载提速10倍:ctfileGet工具全解析
3个秘诀让城通网盘下载提速10倍:ctfileGet工具全解析 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet ctfileGet是一款专注于获取城通网盘直连地址的开源工具,通过本地解析技术帮…...
XHS-Downloader:解决小红书内容高效采集难题的开源解决方案
XHS-Downloader:解决小红书内容高效采集难题的开源解决方案 【免费下载链接】XHS-Downloader 小红书(XiaoHongShu、RedNote)链接提取/作品采集工具:提取账号发布、收藏、点赞、专辑作品链接;提取搜索结果作品、用户链接…...
如何快速配置TranslucentTB:Windows任务栏美化终极教程
如何快速配置TranslucentTB:Windows任务栏美化终极教程 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 想要让Windows任务栏变…...
租车宝 token、payload算法分析
声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 部分python代码 url "/queryOr…...
重组胶原蛋白 | 可溶性蛋白 | 蛋白纯化 | 原核与真核系统
在生命科学研究中,重组胶原蛋白(Recombinant Collagen)作为一种关键的生物大分子,因其独特的结构特点和在细胞外基质研究中的重要性而被广泛关注。一、胶原蛋白分子构成与分类胶原蛋白(Collagen)是动物体内…...
2026实测不踩坑!6款成品PPT网站客观测评
2026实测不踩坑!6款成品PPT网站客观测评作为常年深耕AI工具测评的博主,日常需应对各类PPT创作需求,也经常收到粉丝咨询相关工具选择。经过实测多款成品PPT网站后,整理出6款适配性较强的平台,涵盖不同需求场景ÿ…...
