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…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
