vue实现图片放大缩小和拖拽
目标效果:
QQ录屏20230629172545
鼠标滚轮向上转动图片放大;鼠标滚轮向下转动图片缩小;用鼠标点击图片可移动
知识点:
1.实现拖拽有两种方法,第一种是drag相关函数,第二种是mouse相关函数,这种方法的差别与选择尚不清楚,这里用的是mouse相关函数
2.拖拽函数和mouse相关函数会互相影响,要实现拖拽需要设置元素draggable="false"
3.大致解决思路是这样的:
element.onmousedown{
document.onmousemove()
element.onmouseup{
document.removemousemove()
}
}
具体实现代码如下:
-
<!--定义要实现拖拽功能的元素。高度和宽度择其一进行设置,否则图片会变形;zoom属性用来实现图片的放大缩小;transform.translate属性用来实现图片的移动-->
-
-
<img :style="{'zoom':zoom,'height':'800px','transform':'translate(' x 'px,' y 'px)'}" draggable="false" @mousewheel="change_img($event)" @mousedown="mousedown($event)" id="pic">
-
-
<button @click="closePic"></button>
-
-
export default({
-
-
data(){
-
-
return{
-
-
//定义相关变量,zoom记录图片缩放值;x/y记录图片平移值;startx/starty记录点击鼠标的位置;endx/endy记录松开鼠标的位置
-
-
zoom:1,
-
-
x:0,
-
-
y:0,
-
-
startx:'',
-
-
starty:'',
-
-
endx:0,
-
-
endy:0,
-
-
}
-
-
},
-
-
method:{
-
-
//鼠标滚轮转动时执行函数,获取delta,根据数值的正负判断鼠标滚轮转动的方向,以此改变zoom,实现放大或者缩小图片的效果
-
-
change_img(e){
-
-
if(e.deltaY<0)
-
-
this.zoom
-
-
else
-
-
this.zoom--
-
-
},
-
-
//用mousedown/mousemove/mouseup事件实现鼠标拖拽图片移动效果
-
-
mousedown(e){
-
-
// 绑定mousemove
-
-
this.startx=e.pageX; this.starty=e.pageY
-
-
document.addEventListener('mousemove',this.mousemove)
-
-
document.getElementById('pic').addEventListener('mouseup',this.mouseup)
-
-
},
-
-
mousemove(e){
-
-
this.x=e.pageX-this.startx this.endx
-
-
this.y=e.pageY-this.starty this.endy
-
-
},
-
-
mouseup(){
-
-
// 解除绑定mousemove
-
-
document.removeEventListener('mousemove',this.mousemove,false)
-
-
this.endx=this.x
-
-
this.endy=this.y
-
-
},
-
-
//点击按钮让图片恢复初始状态
-
-
closePic(){
-
-
this.x=0
-
-
this.y=0
-
-
this.zoom=1
-
-
this.endx=0
-
-
this.endy=0
-
-
}
-
-
}
-
-
})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbegfk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01