面向对象的放大镜写法

一   html部分

const arr = [
            { id: 1, small: '1.small.jpg', large: '1.large.jpg' },
            { id: 2, small: '2.small.jpg', large: '2.large.jpg' },
            { id: 3, small: '3.small.jpg', large: '3.large.jpg' },
        ];
        const oBox=document.querySelector('div');
        const oGlassObj=new MyGlassObj(oBox,arr);
        oGlassObj.init();
        window.addEventListener( 'resize' , function(){
            // 当页面大小改变是 调用 实例化对象中 重新获取数据函数
            oGlassObj.getSize();
        })

二 导入的js文件部分

class MyGlassObj {
    constructor(element, mgarr) {
        this.ele = element;
        this.arr = mgarr;

        // 定义动态写入的函数
        this.show;
        this.mask;
        this.list;
        this.glass;
        this.img;
        this.imgArr;

        this.marginLeft;
        this.marginTop;
        this.borderLeft;
        this.borderTop;
        this.showWidth;
        this.showHeight;
        this.maskWidth;
        this.maskHeight;

    }
    init() {
        this.setPage();
        this.mouseShow();
        this.mouseList();
        this.mouseMove();
    }
    // 定义动态写入函数
    setPage() {
        this.show = document.createElement('div');
        this.mask = document.createElement('div');
        this.list = document.createElement('ul');
        this.glass = document.createElement('div');
        this.img = document.createElement('img');
        //  给标签添加属性
        this.show.classList.add('show');
        this.mask.classList.add('mask');
        this.list.classList.add('list');
        this.glass.classList.add('glass');
        //  给show里面的img添加src属性
        this.img.setAttribute('src', `./images/${this.arr[0].large}`);
        // 给glass里面添加背景图片
        this.glass.style.backgroundImage = `url(./images/${this.arr[0].large})`;
        //    给ul中的li写入进去
        let ulliStr = '';
        this.arr.forEach(function (item, key) {
            ulliStr += key === 0 ? `<li><img src="./images/${item.small}" class="active" index="${key}"></li>` : `<li><img src="./images/${item.small}" alt="" index='${key}'></li>`
        })
        this.list.innerHTML = ulliStr;
        // 将这些标签都写入进obox当中
        this.show.appendChild(this.img);
        this.show.appendChild(this.mask);
        this.ele.appendChild(this.show);
        this.ele.appendChild(this.glass);
        this.ele.appendChild(this.list);
        this.imgArr = this.list.querySelectorAll('img');
        // 获取占位
        // 外边距占位
        this.marginLeft = this.ele.offsetLeft;
        this.marginTop = this.ele.offsetTop;
        // 边框线
        this.borderLeft = this.show.clientLeft;
        this.borderTop = this.show.clientTop;
        // show占位 内容+padding
        this.showWidth = this.show.clientWidth;
        this.showHeight = this.show.clientHeight;
        // mask占位 内容是内容+padding+borde
        this.maskWidth = parseInt(window.getComputedStyle(this.mask).width);
        this.maskHeight = parseInt(window.getComputedStyle(this.mask).height);



    }

    // 定义鼠标移动时,glass和mask显示
    mouseShow() {
        this.show.addEventListener('mouseenter', () => {
            this.mask.style.display = "block";
            this.glass.style.display = "block";
        })
        this.show.addEventListener('mouseleave', () => {
            this.mask.style.display = "none";
            this.glass.style.display = "none";
        })
    }


    // 当鼠标经过list时图片发生变化
    mouseList() {
        this.list.addEventListener('mouseover', e => {
            if (e.target.tagName === "IMG") {
                this.imgArr.forEach(function (item, key) {
                    item.classList.remove('active')
                })
                e.target.classList.add('active');
                this.img.setAttribute('src', `./images/${this.arr[Number(e.target.getAttribute('index'))].large}`);
                this.glass.style.backgroundImage = `url('./images/${this.arr[Number(e.target.getAttribute('index'))].large}')`
            }

        })
    }

    mouseMove() {
        this.show.addEventListener('mousemove', e => {
            let x=e.pageX-this.marginLeft-this.borderLeft-this.maskWidth/2;
            let y=e.pageY-this.marginTop-this.borderTop-this.maskHeight/2;
            // 计算极值
            x=x<0?0:x;
            y=y<0?0:y;
            x=x>this.showWidth-this.maskWidth?this.showWidth-this.maskWidth:x;
            y=y>this.showHeight-this.maskHeight?this.showWidth-this.maskHeight:y;
            this.mask.style.left=x+'px';
            this.mask.style.top=y+'px';
            this.glass.style.backgroundPosition=`${-x*4}px ${-y*4}px`;

        })







    }

    getSize() {
        // 重新获取占位数据
        // 外边距
        this.marginLeft = this.ele.offsetLeft;
        this.marginTop = this.ele.offsetTop;

        // 边框线
        this.borderLeft = this.show.clientLeft;
        this.borderTop = this.show.clientTop;

        // show占位 内容+padding
        this.showWidth = this.show.clientWidth;
        this.showHeight = this.show.clientHeight;

        // mask占位 内容+padding+border ;
        // mask默认是 none 隐藏 直接获取占位结果是 0;
        // 只能通过 css样式获取占位数值 内容+padding+border;

        this.maskWidth = parseInt(window.getComputedStyle(this.mask).width);
        this.maskHeight = parseInt(window.getComputedStyle(this.mask).height);
    }

}