目标效果:
QQ录屏0629172545
鼠标滚轮向上转动图片放大;鼠标滚轮向下转动图片缩小;用鼠标点击图片可移动
知识点:
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++elsethis.zoom--},//用mousedown/mousemove/mouseup事件实现鼠标拖拽图片移动效果mousedown(e){// 绑定mousemovethis.startx=e.pageX; this.starty=e.pageYdocument.addEventListener('mousemove',this.mousemove)document.getElementById('pic').addEventListener('mouseup',this.mouseup)},mousemove(e){this.x=e.pageX-this.startx+this.endxthis.y=e.pageY-this.starty+this.endy},mouseup(){// 解除绑定mousemovedocument.removeEventListener('mousemove',this.mousemove,false)this.endx=this.xthis.endy=this.y},//点击按钮让图片恢复初始状态closePic(){this.x=0this.y=0this.zoom=1this.endx=0this.endy=0}}})