不同技术实现鼠标滚动图片的放大缩小

在这里插入图片描述

摘要:

最近弄PC端的需求时,要求在layui技术下实现鼠标滚动图片的放大缩小的功能!下面来总结一下不同框架剩下这功能!

layui:
看了一下layui文档,其实这有自带的组件的!但是又版本要求的!并且layui的官方文档是不维护的了!记得使用最新的版本!

layui.use(['table', "util"]function () {var $ = layui.jquery;var util = layui.util;util.event('zoom', function(obj){var oImg = document.getElementById('solo_pic');var scale = obj.deltaY > 0 ? 1.1 : 0.9; var width = oImg.width * scale;var height = oImg.height * scale;if (width > 500 || width < 10) return;oImg.width = width;oImg.height = height;});
})

jquery:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {function zoomImg(o) {var zoom = parseInt(o.style.zoom, 10) || 100;zoom += event.wheelDelta / 12; //可适合修改if (zoom > 0) o.style.zoom = zoom + '%';}$(document).ready(function() {$("img").bind("mousewheel",function() {zoomImg(this);return false;});});})</script>
</head><body><center><img src="../static/img/111.jpg" border="1px" /></center>
</body></html>

添加遮罩层:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script><style>/*************图片预览************/#outerdiv {position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.7);z-index: 2;width: 100%;height: 100%;display: none;}#innerdiv {position: absolute;}#bigimg {border: 5px solid #fff;cursor: pointer;}</style><script type="text/javascript">$(function() {function zoomImg(o) {var zoom = parseInt(o.style.zoom, 10) || 100;zoom += event.wheelDelta / 12; //可适合修改if (zoom > 0) o.style.zoom = zoom + '%';}$(document).ready(function() {$("img").bind("mousewheel",function() {zoomImg(this);return false;});});})</script>
</head><body><center><img id="img" src="../static/img/111.jpg" border="1px" @click="bigimg()" /></center><div id="outerdiv"><div id="innerdiv"><img id="bigimg" src="" onmousewheel="bigimg(this)" /></div></div><script>$(`#img`).click(function() {var _this = $(this); //将当前的img元素作为_this传入函数imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);})// 图片缩放function bigimg(obj) {// alert(parseInt(obj.style.zoom, 10));//obj是一个对象,初始时obj并没有zoom属性,所以给zoom赋值为100;var zoom = parseInt(obj.style.zoom, 10) || 100;//每次滚动鼠标时,改变zoom的大小//event.wheelDelta有两个值,120,-120,取值情况取决于滚动鼠标的方向;zoom += event.wheelDelta / 12; //每次滚动加减10if (zoom > 0)obj.style.zoom = zoom + '%'; //更改后的zoom赋值给objreturn false;}// 预览图片function imgShow(outerdiv, innerdiv, bigimg, _this) {var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性$(bigimg).attr("src", src); //设置#bigimg元素的src属性/*获取当前点击图片的真实大小,并显示弹出层及大图*/$("<img />").attr("src", src).load(function() {var windowW = $(window).width(); //获取当前窗口宽度var windowH = $(window).height(); //获取当前窗口高度var realWidth = this.width; //获取图片真实宽度var realHeight = this.height; //获取图片真实高度var imgWidth, imgHeight;var scale = 0.8; //缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放if (realHeight > windowH * scale) { //判断图片高度imgHeight = windowH * scale; //如大于窗口高度,图片高度进行缩放imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度imgWidth = windowW * scale; //再对宽度进行缩放}} else if (realWidth > windowW * scale) { //如图片高度合适,判断图片宽度imgWidth = windowW * scale; //如大于窗口宽度,图片宽度进行缩放imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度} else { //如果图片真实高度和宽度都符合要求,高宽不变imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距$(innerdiv).css({ "top": h, "left": w }); //设置#innerdiv的top和left属性$(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg});$(outerdiv).click(function() { //再次点击淡出消失弹出层$(this).fadeOut("fast");});}</script>
</body></html>

为每个包含图片div元素附加了一个滚轮事件监听器,当用户在这些元素上滚动滚轮时,调用zoomImage函数进行放大/缩小操作。
zoomImage函数内部,通过$(this).find('img')选择器找到了当前元素内img元素,接下来从滚轮事件中获取了用户的滚动方向,然后计算出当前图片的放大/缩小后的宽度和高度,并将其重新赋值给了图片元素。 注意在这个代码中我们同时监听了mousewheelDOMMouseScroll`这两种不同浏览器的滚轮事件,以保证代码能够在不同的浏览器中正常运行。

$(document).ready(function() {function zoomImage(event) {event.preventDefault();var image = $(this).find('img');var delta = event.originalEvent.deltaY || event.originalEvent.detail || event.originalEvent.wheelDelta;var zoom = delta > 0 ? -0.2 : 0.2;var newWidth = image.width() + (image.width() * zoom);var newHeight = image.height() + (image.height() * zoom);image.width(newWidth).height(newHeight);}$('div.image-container').on('mousewheel DOMMouseScroll', zoomImage);
});

Vue,JS实现图片鼠标拖拽,滚轮放大缩小:

<template><div><img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片":id="'vc-imgself-img-'+attach"><div class="full-img" v-show="show" @contextmenu.prevent.stop="clearStyle"><img :src="currentImageSrc" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"@mousedown.prevent="dropImage" style="position:fixed"><div class="btns row"><button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button><button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button><button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button><button type="button" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button><button type="button" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</button></div></div></div>
</template><script>import $ from 'jquery'export default {props: {src: {type: String},width: {default: 60},height: {default: 60},alt: {default: '图片加载失败'},attach: {type: String,default: 'name'},list: {type: Array,default: []}},data() {return {show: false,deg: 0,odiv: null,powerw: 1.0,container:null,positionX: null,positionY: null,powerh: 1.0,currentImageSrc:this.src}},ready(){const elementsToMount = document.getElementsByClassName("full-img");this.container = document.createElement('div');this.container.style.height = '0px'// 将要挂载的元素放入新创建的 div中for (let i = 0; i < elementsToMount.length; i++) {this.container.appendChild(elementsToMount[i]);}// 将新创建的 div 挂载到 body 上document.body.appendChild(this.container);},beforeDestroy(){// 销毁挂载的if (this.container && this.container.parentNode) {this.container.parentNode.removeChild(this.container);}},methods: {nextPage() {console.log(this.list)//当前图片,是最后一张图片if (this.currentImageSrc=== this.list[this.list.length - 1].f_overall_path) {this.currentImageSrc= this.list[0].f_overall_path} else {for (let i = 0; i < this.list.length; i++) {if (this.currentImageSrc=== this.list[i].f_overall_path) {this.currentImageSrc= this.list[i + 1].f_overall_pathbreak}}}},previousPage() {console.log(this.list)//当前图片,是第一张图片if (this.currentImageSrc === this.list[0].f_overall_path) {this.currentImageSrc= this.list[this.list.length - 1].f_overall_path} else {for (let i = 0; i < this.list.length; i++) {if (this.currentImageSrc=== this.list[i].f_overall_path) {this.currentImageSrc= this.list[i - 1].f_overall_pathbreak}}}},clearStyle(e){if (e === null) {return}this.odiv = document.getElementById('image')this.odiv.style.left = 500 + 'px';this.odiv.style.top = -150 + 'px';},bigimg() {if (event.wheelDelta > 0) {this.powerh = this.powerh * 1.15this.powerw = 1.15 * this.powerw} else {this.powerh = this.powerh * 0.85this.powerw = 0.85 * this.powerw}this.imgState()},dropImage(e) {if (e === null) {return}this.odiv = e.target;let disX = e.clientX - this.odiv.offsetLeft;let disY = e.clientY - this.odiv.offsetTop;document.onmousemove = (e) => {let left = e.clientX - disX;let top = e.clientY - disY;this.positionX = top;this.positionY = left;this.odiv.style.left = left + 'px';this.odiv.style.top = top + 'px';};document.onmouseup = (e) => {document.onmousemove = null;document.onmouseup = null;};},open() {this.deg = 0this.powerw = 0.7this.powerh = 0.8$('.full-img').css({'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'})$('.container').css({'opacity': '1'})this.show = true},close() {this.show = false},leftRevolve() {//tagthis.deg -= 90this.imgState()},rightRevolve() {//tagthis.deg += 90this.imgState()},imgState() {$('.img-state').css({'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'})}},}
</script>
<style media="screen" scoped>.full-img {position: fixed;width: 100%;/*height: 1000px;*/overflow: hidden;top: 0;bottom: 0;left: 0;right: 0;z-index: 1070;opacity: 1;background: rgba(0, 0, 0, 0.8);display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;}.btns {position: fixed;bottom: 100px;height: auto;}.btns button {margin-right: 20px;}.img-state {}
</style>

调用组件:

<img-self-plus :width="120" :height="160" :src="row.url"></img-self-plus><

vue插件实现:

npm install vue-directive-zoom --save
<template><div v-zoom:2="zoomOptions"><img src="path/to/your/image.jpg" alt="Zoomable Image"></div>
</template><script>
import Vue from 'vue';
import VueDirectiveZoom from 'vue-directive-zoom';Vue.use(VueDirectiveZoom);export default {data() {return {zoomOptions: {mouseWheel: true, // 开启鼠标滚轮缩放zoomMax: 5, // 最大缩放比例zoomMin: 1, // 最小缩放比例zoomStart: 1 // 初始缩放比例}};}
};
</script>

v-zoom:2指令用于放大图片,你可以通过调整zoomOptions中的参数来控制缩放的行为,如是否启用鼠标滚轮缩放,以及设置最大和最小缩放比例等。
请注意,vue-directive-zoom库可能不是最新的,并且可能不支持Vue 3。如果你使用的是Vue 3,可能需要寻找其他的解决方案。

react:
React中实现鼠标滚动来放大缩小图片,可以通过监听wheel事件来实现。

import React, { useState, useRef } from 'react';
import './App.css';function App() {const [scale, setScale] = useState(1);const imageRef = useRef(null);const handleWheel = (e) => {e.preventDefault();const newScale = e.deltaY > 0 ? scale * 1.1 : scale / 1.1;setScale(newScale);};return (<div className="App"><divclassName="image-container"ref={imageRef}style={{ transform: `scale(${scale})` }}onWheel={handleWheel}><img src="path_to_your_image.jpg" alt="Zoomable Image" /></div></div>);
}export default App;

我们使用了React的useState钩子来跟踪图片的缩放比例,并使用useRef钩子来获取对图片容器的引用。handleWheel函数会在鼠标滚轮滚动时被调用,并根据滚动的方向计算新的缩放比例。然后,我们通过设置容器的transform样式来应用缩放效果。

请确保在CSS中设置.image-container的overflow属性为hidden,以防止缩放后的图片溢出容器。

/* App.css */
.image-container {overflow: hidden;display: inline-block;/* other styles */
}

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

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

相关文章

无人驾驶 自动驾驶汽车 环境感知 精准定位 决策与规划 控制与执行 高精地图与车联网V2X 深度神经网络学习 深度强化学习 Apollo

无人驾驶 百度apollo课程 1-5 百度apollo课程 6-8 七月在线 无人驾驶系列知识入门到提高 当今,自动驾驶技术已经成为整个汽车产业的最新发展方向。应用自动驾驶技术可以全面提升汽车驾驶的安全性、舒适性,满足更高层次的市场需求等。自动驾驶技术得益于人工智能技术的应用…

Linux网络编程---多进/线程并发服务器

一、多进程并发服务器 实现一个服务器可以连接多个客户端&#xff0c;每当accept函数等待到客户端进行连接时 就创建一个子进程 思路分析&#xff1a; 核心思路&#xff1a;让accept循环阻塞等待客户端&#xff0c;每当有客户端连接时就fork子进程&#xff0c;让子进程去和客户…

怎么用PHP语言实现远程控制电器

怎么用PHP语言实现远程控制电器呢&#xff1f; 本文描述了使用PHP语言调用HTTP接口&#xff0c;实现控制电器&#xff0c;通过控制电器的电源线路来实现电器控制。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称厂商1智能WiFi通断器AC3统…

ubuntu22 部署fastDFS单节点和集群,整合Spring Boot(刚部署成功)

ubuntu22 部署fastDFS单节点和集群 一、先准备1、所需依赖安装2、下载安装包 二、安装FastDFS单节点1、libfastcommon安装1.1、创建软连接 2、安装fastDFS2.1、fastDFS目录简单介绍2.2、创建软连接 3、配置和启动Tracker服务3.1、修改Tracker配置文件3.2、启动Tracker 4、配置和…

IBM SPSS Statistics for Mac v27.0.1中文激活版:强大的数据分析工具

IBM SPSS Statistics for Mac是一款功能强大的数据分析工具&#xff0c;为Mac用户提供了高效、精准的数据分析体验。 IBM SPSS Statistics for Mac v27.0.1中文激活版下载 该软件拥有丰富的统计分析功能&#xff0c;无论是描述性统计、推论性统计&#xff0c;还是高级的多元统计…

金融风控信用评分卡建模(Kaggle give me credit数据集)

1 数据预处理数据 数据来源于Kaggle的Give Me Some Credit&#xff0c;包括25万条个人财务情况的样本数据 1.1 导包读数据 import pandas as pd import numpy as np import matplotlib.pyplot as plt from sklearn.ensemble import RandomForestRegressor import seaborn as …

pyqt设置标签显示图片并设置大小

pyqt设置标签显示图片并设置大小 标签显示图片效果代码 标签显示图片 使用 QPixmap 加载图片进行图片大小设置把图片对象设置到标签上 效果 代码 from PyQt5.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget from PyQt5.QtGui import QPixmap import sys from…

【蓝桥杯2025备赛】素数判断:从O(n^2)到O(n)学习之路

素数判断:从O( n 2 n^2 n2)到O(n)学习之路 背景:每一个初学计算机的人肯定避免不了碰到素数&#xff0c;素数是什么&#xff0c;怎么判断&#xff1f; 素数的概念不难理解:素数即质数&#xff0c;指的是在大于1的自然数中&#xff0c;除了1和它本身不再有其他因数的自然数。 …

比 PSD.js 更强的下一代 PSD 解析器,支持 WebAssembly

比 PSD.js 更强的下一代 PSD 解析器&#xff0c;支持 WebAssembly 1.什么是 webtoon/ps webtoon/ps 是 Typescript 中轻量级 Adobe Photoshop .psd/.psb 文件解析器&#xff0c;对 Web 浏览器和 NodeJS 环境提供支持&#xff0c;且做到零依赖。 Fast zero-dependency PSD par…

openWebUI+ollamawindows+不用docker+webLite本地安装

openWebUI & ollama & windows & 不用docker & webLite 本地安装 总结一下安装教程 10核CPU16G内存 两个web框架都可以&#xff0c;先说简单的 ollama-webui-lite(https://github.com/ollama-webui/ollama-webui-lite) 轻量级&#xff0c;只使用nodejs 先装…

【介绍下如何使用CocoaPods】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

模板(二)

文章目录 模板&#xff08;二&#xff09;1 非类型模板参数2. 模板的特化2.1. 概念2.2 函数模板特化2.3 类模板特化2.3.1 全特化2.3.2 偏特化2.3.3 类模板特化应用示例 3 模板的分离编译3.1 什么是分离编译3.2 模板的分离编译3.3 解决方法 4. 模板总结 模板&#xff08;二&…

20.Nacos集群搭建

模拟Nacos三个节点&#xff0c;同一个ip,启动三个不同的端口&#xff1a; 节点 nacos1, 端口&#xff1a;8845 节点 nacos2, 端口&#xff1a;8846 节点 nacos3, 端口&#xff1a;8847 1.搭建数据库&#xff0c;初始化数据库表结构 这里我们以单点的数据库为例 首先新建一…

vue与Spring boot数据交互例子【简单版】

文章目录 什么是Vue&#xff1f;快速体验Vueaxios是什么&#xff1f;向Springboot后端发送数据接收Springboot后端数据小结 什么是Vue&#xff1f; 官网解释&#xff1a;Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上…

黑马微服务课程1

目录 一、GateWay 二、服务调用OpenFeign 三、Sentinel 1. 流量控制&#xff08;限流规则&#xff09; 2. 隔离和降级 2.1 FeignClient整合Sentinel 2.2 线程隔离&#xff08;舱壁模式&#xff09; 2.3 熔断降级 3. 授权规则 3.1 授权规则 3.2 自定义异常结果 4. 规…

功能测试前景揭秘:会被淘汰吗?

在当今快速发展的信息时代&#xff0c;软件已经成为我们工作、学习乃至生活中不可或缺的一部分。随着技术的不断进步和应用的广泛普及&#xff0c;软件测试作为保障软件质量和功能实现的关键步骤&#xff0c;其职业发展路径也受到了广泛的关注。特别是针对功能测试这一细分领域…

T1级,生产环境事故—Shell脚本一键备份K8s的YAML文件

大家好&#xff0c;我叫秋意零。 最近对公司进行日常运维工作时&#xff0c;出现了一个 T1 级别事故。导致公司的“酒云网”APP的无法使用。我和我领导一起搞了一个多小时&#xff0c;业务也停了一个多小时。 起因是&#xff1a;我的部门直系领导&#xff0c;叫我**删除一个 …

计算机视觉 CV 八股分享 [自用](更新中......)

目录 一、深度学习中解决过拟合方法 二、深度学习中解决欠拟合方法 三、梯度消失和梯度爆炸 解决梯度消失的方法 解决梯度爆炸的方法 四、神经网络权重初始化方法 五、梯度下降法 六、BatchNorm 七、归一化方法 八、卷积 九、池化 十、激活函数 十一、预训练 十二…

MemFire解决方案-物联网数据平台解决方案

方案背景 随着各种通讯、传感技术发展&#xff0c;数据通讯成本的急剧下降&#xff0c;数以万亿计的智能设备&#xff08;智能手环、智能电表、智能手机、各种传感器设备等&#xff09;接入网络&#xff0c;并源源不断的产生海量的实时数据。这些海量数据的价值挖掘&#xff0…

【算法基础实验】图论-基于DFS的连通性检测

基于DFS的连通性检测 理论基础 在图论中&#xff0c;连通分量是无向图的一个重要概念&#xff0c;特别是在处理图的结构和解析图的组成时。连通分组件表示图中的一个子图&#xff0c;在这个子图中任意两个顶点都是连通的&#xff0c;即存在一条路径可以从一个顶点到达另一个顶…