面向对象的示例-CSDN博客

本文链接：https://blog.csdn.net/Clytza/article/details/129327904

放大镜的实现*

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .Box {
            width: 612px;
            height: 434px;
            position: relative;
            border: 10px solid peru;
            float: left;
            margin-right: 50px;
        }
        .Box>img {
            width: 100%;
            height: 100%;
        }
        .moveBox {
            background-color: rgba(241, 223, 60, 0.5);
            width: 412px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            cursor: pointer;
        }
        .showBox {
            /* 412,234 */
            width: 1024px;
            height: 668px;
            border: 10px solid peru;
            overflow: hidden;
            position: relative;
        }
        .showBox>img {
            width: 1436px;
            height: 902px;
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <div class="Box">
        <img src="./pic6.jpg" alt="">
        <div class="moveBox"></div>
    </div>
    <div class="showBox">
        <img src="./pic6.jpg" alt="">
    </div>
    <script src="./drag.js"></script>
    <script>
        class magnifyGlass extends Drag {
            constructor(Box, moveBox, showBox, showBoxImg) {
                    super(moveBox, Box) //父类构造调用 按下操作（不需要）
                        // this.Box = Box
                        // this.moveBox = moveBox
                    this.showBox = showBox
                    this.showBoxImg = showBoxImg
                        //取消按下事件
                    this.element.onmousedown = null
                        //调用事件
                    this.enter()
                    this.leave()
                }
                //重写设置位置的函数
            setPoint() {
                    //设置对应的位置
                    this.element.style.left = this.targetPoint.x + 'px'
                    this.element.style.top = this.targetPoint.y + 'px'

                    //同时设置对应的大盒子里面的图片位置 这个位置绝对是负值
                    this.showBoxImg.style.left = -1 * this.targetPoint.x * this.showBoxImg.clientWidth / this.intervalElement.clientWidth + 'px'
                    this.showBoxImg.style.top = -1 * this.targetPoint.y * this.showBoxImg.clientHeight / this.intervalElement.clientHeight + 'px'
                }
                //移入
            enter() {
                    this.intervalElement.onmouseenter = () => {
                        //显示对应的element
                        this.element.style.display = 'block'
                            //显示ImgBox
                        this.showBoxImg.style.display = 'block'
                            //初始化移动盒子的宽高
                        this.init()
                            //设置对应的按下的中心点
                        this.downPoint = {
                            x: this.element.offsetWidth / 2,
                            y: this.element.offsetHeight / 2
                        }
                        this.move()
                    }
                }
                //移出
            leave() {
                this.intervalElement.onmouseleave = () => {
                    //显示对应的element
                    this.element.style.display = 'none'
                        //显示ImgBox
                    this.showBoxImg.style.display = 'none'
                }
            }
            init() {
                //指定element的宽度和高度
                // moveBox = bigBox(2)/ bigImg(4) * imgBox (2)
                this.element.style.width = this.intervalElement.clientWidth / this.showBoxImg.clientWidth * this.showBoxImg.clientWidth + 'px'
                this.element.style.height = this.intervalElement.clientHeight / this.showBoxImg.clientHeight * this.showBoxImg.clientHeight + 'px'
            }
        }
        var Box = document.querySelector('.Box')
        var moveBox = document.querySelector('.moveBox')
        var showBox = document.querySelector('.showBox')
        var showBoxImg = document.querySelector('.showBox>img')
        new magnifyGlass(Box, moveBox, showBox, showBoxImg)
    </script>
</body>

</html>

drag.js

//拖拽的元素 属性
//拖拽的处理就是对应方法
class Drag {
    //拖拽的元素  区间元素
    constructor(element, intervalElement) {
            this.element = element
            this.intervalElement = intervalElement || document
                //记录按下的坐标
            this.downPoint = {
                    x: 0,
                    y: 0
                }
                //目标坐标
            this.targetPoint = {}
            this.down()
        }
        //移动的处理
    move() {
        this.intervalElement.onmousemove = (e) => {
            //记录移动的位置
            //减去对应的区间元素离页面的位置 区间内的位置
            let currentPoint = {
                    x: e.pageX - this.getIntervalToPage().left,
                    y: e.pageY - this.getIntervalToPage().top
                }
                //目标位置
            this.targetPoint = {
                    x: currentPoint.x - this.downPoint.x,
                    y: currentPoint.y - this.downPoint.y
                }
                //检索区间
            this.checkRange()
                //设置位置
            this.setPoint()
        }
    }
    setPoint() {
            //设置对应的位置
            this.element.style.left = this.targetPoint.x + 'px'
            this.element.style.top = this.targetPoint.y + 'px'
        }
        //区间判断
    checkRange() {
            //获取最大移动距离
            let max = {
                    x: this.intervalElement.clientWidth - this.element.offsetWidth,
                    y: this.intervalElement.clientHeight - this.element.offsetHeight,
                }
                //遍历
            for (var key in this.targetPoint) {
                //最小值判断
                if (this.targetPoint[key] < 0) {
                    this.targetPoint[key] = 0
                }
                //最大值判断
                if (this.targetPoint[key] > max[key]) {
                    this.targetPoint[key] = max[key]
                }
            }
        }
        //按下
    down() {
            //在对应的拖拽元素里面按下
            this.element.onmousedown = (e) => {
                e = e || window.event
                    //记录对应的按下位置
                this.downPoint.x = e.offsetX
                this.downPoint.y = e.offsetY
                this.move()
                this.up()
            }
        }
        //弹起
    up() {
            document.onmouseup = () => {
                this.intervalElement.onmousemove = document.onmouseup = null
            }
        }
        //获取页面离区间的位置
    getIntervalToPage() {
        let element = this.intervalElement
        let distance = {
            left: 0,
            top: 0
        }
        while (element.offsetParent) {
            distance.left += element.offsetLeft
            distance.top += element.offsetTop
            element = element.offsetParent
        }
        return distance
    }
}