Vue 实现鼠标滚轮缩放图片并拖动

需求：实现鼠标滚轮上滚下滚缩放图片，单击不松开拖动图片

给图片添加一个盒子

// dom
<div @mousewheel.prevent="rollImg" class="box"><img :src="src" class="img" ref="imgDiv" @mousedown="move" />
</div>

methods中的代码：

// script// 拖动图片
move(e) {// 阻止默认事件e.preventDefault();// 获取元素var boxDom = document.querySelector(".box");var img = document.querySelector(".img");var x = e.pageX - img.offsetLeft;var y = e.pageY - img.offsetTop;// 鼠标移动事件boxDom.addEventListener("mousemove", move);function move(e) {img.style.left = e.pageX - x + "px";img.style.top = e.pageY - y + "px";}// 鼠标抬起移除事件img.addEventListener("mouseup", function () {boxDom.removeEventListener("mousemove", move);});// 鼠标离开移除事件boxDom.addEventListener("mouseout", function () {boxDom.removeEventListener("mousemove", move);});
},
// 缩放图片
rollImg(e) {let transform = this.$refs.imgDiv.style.transformlet zoom = transform.indexOf("scale") != -1 ? +transform.split("(")[1].split(")")[0] : 1zoom += e.wheelDelta / 1200if (zoom > 0.1 && zoom < 5) {this.$refs.imgDiv.style.transform = "scale(" + zoom + ")"}
},

CSS样式：

// css
.box {position: relative;width: 100%;height: 360px;background-color: rgb(147, 145, 145);// 添加背景图片background-image: url(../../../assets/img/bg.png);background-position: 0 0;float: left;overflow: hidden;
}.img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;max-width: 923px;max-height: 460px;cursor: move;
}

效果：

Vue 实现鼠标滚轮缩放图片并拖动相关推荐

Python OpenCV：利用鼠标移动缩放图片
一.实现目标在OpenCV中通过鼠标左键拖拽移动图片,通过鼠标滚轮前后旋转放大缩小图片. 二.实现背景在前一篇博客在OpenCV中使用滚动条显示大图中发现自己画滚动条移动大图略显繁琐,且缩 ...
VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放
VUE3 实现前台图片标注功能包括: 鼠标左键拖动添加矩形框标记区域,鼠标点击已绘制的矩形: 选中矩形,并绘制不同选中效果: 鼠标在已绘制的矩形中按住左键拖动,选中并移动矩形:选中矩形后鼠标在选中矩 ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
图片预览，且鼠标滚轮缩放
图片预览,且鼠标滚轮缩放 <!DOCTYPE html> <head><meta charset="utf-8"><meta http-e ...
【Axure视频教程】鼠标滚动缩放图片
今天教大家制作鼠标滚动缩小放大图片的原型模板,包括向下滚动放大.向上滚动缩小.拖动图片移动到指定位置的效果.该教程从材料准备到完成交互,手把手的教学. [视频教程--试看版] [Axure视频教程]鼠 ...
鼠标滚轮控制图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
鼠标滚动缩放图片效果
前段时间本人在做项目时,做了一个鼠标滚动缩放图片效果,图片支持多个,多个图片循环缩放,花了点时间整理了下,把它贴出来,与大家分享下,在ie6.0,ie7.0,firefox都测试过,没有问题. < ...
Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...

Vue 实现鼠标滚轮缩放图片并拖动

Vue 实现鼠标滚轮缩放图片并拖动相关推荐

最新文章

热门文章