图片中点击位置移到可视窗口中心

         // offsetTop,offsetLeft子盒子到父盒子距离
         // x,y点到图片的距离
         // clientHeight,clientWidth父盒子自身宽高
         
         // 如果图片大小超出可视窗口
         if (this.image.offsetTop < 0) {
           this.y = Math.abs(this.image.offsetTop) - y + this.wrapper.clientHeight / 2;
         } else {
           this.y = this.wrapper.clientHeight / 2 - Math.abs(this.image.offsetTop) + y;
         }
         // console.log(this.wrapper.clientHeight / 2, Math.abs(this.image.offsetTop), y)
         if (this.image.offsetLeft < 0) {
           this.x = Math.abs(this.image.offsetLeft) - x + this.wrapper.clientWidth / 2;
         } else {
           this.x = this.wrapper.clientWidth / 2 - Math.abs(this.image.offsetLeft) + x;
         }
         this.x = this.x*this.scale
         this.y = this.y*this.scale
         let images = document.querySelectorAll('.left .img .mapUrl-gather')
         for (let i = 0; i <= images.length - 1; i++) {
           images[i].style.transform = "scale(" + 1 / this.scale +
             ")";
         }
         // console.log(this.x, this.y, this.scale)
         this.image.style.transform = `translate(${this.x}px, ${this.y}px) scale(${this.scale})`;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值