javaScript实现放大镜效果

放大镜效果图如下：

2个比例核心：
右侧大图宽高设置
		左侧展示图大小 / 遮罩层 = 右侧大图大小？ / 右侧放大镜盒子
放大镜移动距离设置
		遮罩层移动位置 / 遮罩层宽高 = 右侧大图left | top / 右侧放大镜盒子宽高

html机构如下：

<!-- 1.外围盒子 -->
    <div id="warper">
        <!-- 2.左侧展示图 -->
        <div class="leftShow">
            <div class="show">
                <img src="./imgs/ying01.jpg">
                <div class="mask"></div>
            </div>
            <ul>
                <li><a href=""><img src="./imgs/ying01.jpg" alt=""></a></li>
                <li><a href=""><img src="./imgs/ying02.jpg" alt=""></a></li>
                <li><a href=""><img src="./imgs/ying03.jpg" alt=""></a></li>
                <li><a href=""><img src="./imgs/ying04.jpg" alt=""></a></li>
            </ul>
        </div>
        <!-- 3.右侧放大图 -->
        <div class="rightGlass">
            <img src="./imgs/ying01.jpg" alt="">
        </div>
    </div>

css样式

* {
  padding: 0;
  margin: 0;
}

.active {
  border: 1px solid red;
}

#warper {
  width: 900px;
  margin: 100px;
  overflow: hidden;
}

#warper .leftShow {
  width: 400px;
  height: 400px;
  float: left;
}

#warper .leftShow .show {
  width: 400px;
  height: 350px;
  position: relative;
}

#warper .leftShow .show img {
  width: 100%;
  height: 100%;
}

#warper .leftShow .show .mask {
  width: 100px;
  height: 100px;
  background: rgba(252, 206, 214, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}

#warper .leftShow ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#warper .leftShow ul li {
  list-style: none;
  float: left;
  width: 50px;
  height: 50px;
}

#warper .leftShow ul li a img {
  width: 100%;
  height: 100%;
}

#warper .rightGlass {
  width: 400px;
  height: 400px;
  float: right;
  overflow: hidden;
  position: relative;
}

#warper .rightGlass img {
  position: absolute;
  top: 0;
  left: 0;
}

javaScript:

 class Glass {
            constructor(id) {
                this.rootEle = document.querySelector(id)
                this.showEle = this.rootEle.querySelector('.show')
                this.showImg = this.rootEle.querySelector('.show img')
                this.maskEle = this.rootEle.querySelector('.mask')
                this.rightGlass = this.rootEle.querySelector('.rightGlass')
                this.rightImg = this.rootEle.querySelector('.rightGlass img')
                this.ulEles = this.rootEle.querySelectorAll('ul li')

            }
            scale(){
                //注意：遮罩层mask出现后调用此方法才有效
                //showEle宽高 / maskEle宽高 = rightImg宽高？？ /rightGlass宽高
                let width = this.showEle.offsetWidth / this.maskEle.offsetWidth * this.rightGlass.offsetWidth
                let height = this.showEle.offsetHeight / this.maskEle.offsetHeight * this.rightGlass.offsetHeight
                this.rightImg.style.width = width + 'px'
                this.rightImg.style.height = height + 'px'
            }
            onGlass() {
                // 保存this=>事件函数中会改变this指向
                let _this = this;
                // 1.鼠标移入showEle，mask遮罩显示
                this.showEle.addEventListener('mouseover', function () {
                    //行内样式设置
                    _this.maskEle.style.display = 'block'; 
                    _this.scale()
                })
                // 2.鼠标移出showEle，mask遮罩隐藏
                this.showEle.addEventListener('mouseout', function () {
                    _this.maskEle.style.display = 'none';
                })
                // 3.鼠标在showEle移动，获得鼠标位置
                this.showEle.addEventListener('mousemove',function(e){
                    //e兼容性设置
                    e = e || window.event;

                    let left = e.offsetX - _this.maskEle.offsetWidth/2;
                    let top = e.offsetY -_this.maskEle.offsetWidth/2;

                    //边界检测
                    if(left<0){
                        left = 0;
                    }
                    if(left > _this.showEle.offsetWidth - _this.maskEle.offsetWidth){
                        left = _this.showEle.offsetWidth - _this.maskEle.offsetWidth
                    }
                    if(top<0){
                        top = 0;
                    }
                    if(top > _this.showEle.offsetHeight - _this.maskEle.offsetHeight){
                        top = _this.showEle.offsetHeight - _this.maskEle.offsetHeight
                    }
                    //光标位置赋值给遮罩层
                    _this.maskEle.style.left = left + 'px';
                    _this.maskEle.style.top = top + 'px';

                    //left / mask宽 = rightImgLeft？？ / rightGlass宽
                    let glassLeft = left / _this.maskEle.offsetWidth * _this.rightGlass.offsetWidth
                    let glassTop = top / _this.maskEle.offsetHeight * _this.rightGlass.offsetHeight
                    _this.rightImg.style.top = -glassTop +  'px'
                    _this.rightImg.style.left = -glassLeft +  'px'
                })

            }
            ontab(){
                let _this = this;
                for(let i=0;i<this.ulEles.length;i++){
                    this.ulEles[i].addEventListener('mouseover',function(){
                        //清除所有li样式
                        _this.onclear()
                        //选中li设置样式
                        this.classList.add('active')
                        //showImg图片更换
                        _this.showImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`)
                         //rightImg
                         _this.rightImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`)
                    })
                }
                
            }
            onclear(){
                for(let i=0;i<this.ulEles.length;i++){
                    this.ulEles[i].classList.remove('active')
                }
            }
        }
        let glass = new Glass("#warper")
        glass.onGlass()
        glass.ontab()