放大镜效果的简单实现

class Magnifier {
    constructor(smallBox, bigBox) {
        this.smallBox = smallBox
        this.bigBox = bigBox
        this.move = smallBox.querySelector('.move')
        this.bigImg = bigBox.children[0]
        this.init()
        this.handlerMouse()
    }
    init() {
        //计算对应的move这个盒子的宽高
        // 大的比大的等于小的比小的 bigImg/bigBox = box/move ==>  bigImg/box == bigBox/move
        this.move.style.width = this.smallBox.clientWidth / (this.bigImg.clientWidth / this.bigBox
                                                             .clientWidth) + 'px'
        this.move.style.height = this.smallBox.clientHeight / (this.bigImg.clientHeight / this.bigBox
                                                               .clientHeight) + 'px'
        //先需要隐藏
        this.move.style.display = 'none'
        this.bigBox.style.display = 'none'
    }
    handlerMouse() {
        //移入移出
        this.smallBox.onmouseenter = () => {
            this.move.style.display = 'block'
            this.bigBox.style.display = 'block'
        }
        this.smallBox.onmouseleave = () => {
            this.move.style.display = 'none'
            this.bigBox.style.display = 'none'
        }
        //移动
        this.smallBox.onmousemove = ({
            pageX,
            pageY
        }) => {
            //获取鼠标在smallbox里面位置
            let currentX = pageX - this.smallBox.offsetLeft
            let currentY = pageY - this.smallBox.offsetTop
            //中心点位置
            let centerPoint = {
                x: this.smallBox.clientWidth / 2,
                y: this.smallBox.clientHeight / 2
            }
            //移动的位置
            let targetPoint = {
                x: currentX - centerPoint.x,
                y: currentY - centerPoint.y
            }
            //边界判断
            if(targetPoint.x<0){
                targetPoint.x = 0
            }
            if(targetPoint.y<0){
                targetPoint.y = 0
            }
            //最大值判断
            let maxPoint = {
                x: this.smallBox.clientWidth - this.move.offsetWidth,
                y: this.smallBox.clientHeight - this.move.offsetHeight
            }
            if(targetPoint.x > maxPoint.x){
                targetPoint.x = maxPoint.x
            }
            if(targetPoint.y > maxPoint.y){
                targetPoint.y = maxPoint.y
            }
            //设置对应的位置
            this.move.style.left =  targetPoint.x + 'px'
            this.move.style.top =  targetPoint.y + 'px'
            //还要设置大盒子里面图片的位置
            this.bigImg.style.left = -targetPoint.x * this.bigImg.clientWidth / this.smallBox.clientWidth + 'px'
            this.bigImg.style.top = -targetPoint.y * this.bigImg.clientHeight / this.smallBox.clientHeight + 'px'
        }
    }
}
var small = document.querySelector('.box')
var big = document.querySelector('.bigbox')
new Magnifier(small, big)