Class放大镜

静态布局

    <div id="wrap">
        <div class="box">
            <img src="./images/哥哥.webp" alt="">
            <span></span>
        </div>
        <div class="box2">
            <img src="./images/哥哥.webp" alt="">
        </div>
    </div>

静态样式

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 800px;
            height: 800px;
            margin: 20px auto;
            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 1px solid;
            position: absolute;
        }

        .box>span {
            width: 80px;
            height: 80px;
            background-color: rgba(200, 200, 200, .3);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .box>img {
            width: 200px;
            height: 200px;
        }

        .box2 {
            width: 400px;
            height: 400px;
            position: absolute;
            border: 1px solid;
            left: 230px;
            top: 0;
            overflow: hidden;
            display: none;
        }

        .box2>img {
            width: 800px;
            height: 800px;
            position: absolute;
        }
    </style>

Js代码部分

 <script>
        class Zoom {
            constructor(ele1, ele2, ele3, ele4) {
                this.box = document.querySelector(ele1)
                this.span = document.querySelector(ele2)
                this.box2 = document.querySelector(ele3)
                this.img = document.querySelector(ele4)
                this.init()
            }
            init(){
                this.mover()
                this.out()
                this.move()
            }
            mover() {
                this.box.onmouseover = () => {
                    this.span.style.display = 'block'
                    this.box2.style.display = 'block'
                }
            }
            out() {
                this.box.onmouseout = () => {
                    this.span.style.display = 'none'
                    this.box2.style.display = 'none'
                }
            }
            move() {
                this.box.onmousemove = (e) => {
                    e = e || window.event
                    // let x = e.clientX,y = e.clientY
                    // console.log(x,y);
                    // 鼠标位置
                    let x = e.clientX - this.box.offsetParent.offsetLeft - this.span.offsetWidth / 2
                    let y = e.clientY - this.box.offsetParent.offsetTop - this.span.offsetHeight / 2
                    // console.log(x,y);
                    // 判断限定区域
                    if (x <= 0) {
                        x = 0
                    } else if (x >= this.box.offsetWidth - this.span.offsetWidth) {
                        x = this.box.offsetWidth - this.span.offsetWidth
                    }
                    if (y <= 0) {
                        y = 0
                    } else if (y >= this.box.offsetHeight - this.span.offsetHeight) {
                        y = this.box.offsetHeight - this.span.offsetHeight
                    }
                    this.span.style.left = x + 'px'
                    this.span.style.top = y + 'px'

                    //计算比例
                    let w = x / (this.box.offsetWidth - this.span.offsetWidth)
                    let h = y / (this.box.offsetHeight - this.span.offsetHeight)

                    // 给大图赋值
                    this.img.style.left = -w * (this.img.offsetWidth - this.box2.offsetWidth) + 'px'
                    this.img.style.top = -h * (this.img.offsetHeight - this.box2.offsetHeight) + 'px'
                }
            }
        }
        new Zoom('.box', 'span', '.box2', '.box2>img')
    </script>

 

标签：box,style,span,放大镜,offsetHeight,offsetWidth,Class,box2
来源： https://www.cnblogs.com/zqs519/p/15819549.html