泸溪县建设局网站,回龙观装修公司哪家好,泉州网站建设公司首选公司哪家好,网页网站怎么做1、功能要求#xff1a;
实现在一个指定区域拖拽div,并可以放大缩小#xff0c;同时显示鼠标在该div里的坐标#xff0c;如图可示 缩小并拖动
2、实现 div classdiv_content refdiv_contentdiv classdiv_image id…1、功能要求
实现在一个指定区域拖拽div,并可以放大缩小同时显示鼠标在该div里的坐标如图可示 缩小并拖动
2、实现 div classdiv_content refdiv_contentdiv classdiv_image idpic:style{zoom:zoom,transform:translate(moveXpx,moveYpx),}mousedown.stopmousedown($event) mousemovehandleMouseMove mouseleavemouseout/divdiv classdiv_image_toolimg src... classdiv_add clickadd_imgdiv classheng/divimg src... classdiv_add div_decrease clickdec_img/div/divdiv classdiv_axirsX:{{ux}} Y:{{uy}}/divjs代码
data(){return{ux: 0,uy: 0,moveX: 0,//X轴移动的距离moveY: 0,startx: ,//鼠标的初始位置starty: ,endx: 0,endy: 0,zoom: 1,//放大的倍数
}
},
methods:{add_img() {this.zoom 10 ? this.zoom this.zoom 0.5 : },dec_img() {this.zoom 0.5 ? this.zoom this.zoom - 0.5 : },mousedown(e) {// 绑定mousemovethis.startx this.formatXY(e.pageX / this.zoom); this.starty this.formatXY(e.pageY / this.zoom)document.onmousemove (e) {this.moveX this.formatXY(e.pageX / this.zoom) - this.startx this.endxthis.moveY this.formatXY(e.pageY / this.zoom) - this.starty this.endye.preventDefault()};document.onmouseup (e) {// 解除绑定mousemovedocument.onmousemove null;this.endx this.moveXthis.endy this.moveY;}},mouseout() {var that this;that.ux 0;that.uy 0;},handleMouseMove(e) {this.getAxis(e)},getAxis(e) {this.ux this.formatXY(e.offsetX / this.zoom);this.uy this.formatXY(e.offsetY / this.zoom);
},formatXY(num) {return num.toFixed(0)},}css .div_content {position: relative;width: 600px;height: 580px !important;margin: 0 20px;overflow: hidden;background: rgb(230, 229, 229);}.div_image {height: 400px;width: 400px;background: white;margin: 100px auto auto 100px !important;}
