day33（案例：HTML5商品放大镜 瀑布流的要点 以及 懒加载的要点和实现）

放大镜

style：
    *{
   
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #sbox{
   
            width: 200px;
            height: 200px;
            background-size:200px 200px;
            position: absolute;
            top: 100px;
            left: 100px;
            cursor: move;
        }
        p{
   
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            opacity: 0.3;
            display: none;
            position: absolute;
        }
        #bbox{
   
            width: 400px;
            height: 400px;
            background-size: 800px 800px;
            position: absolute;
            left: 310px;
            top: 100px;
            display: none;
        }
        ul{
   
            width: 200px;
            height: 40px;
            display: flex;
            position: absolute;
            top: 302px;
            left: 100px;
        }
        li{
   
            width: 20%;
        }
        img{
   
            width: 100%;
            height: 100%;
        }
html：
    <div id="sbox">
        <p></p>
    </div>
    <div id="bbox"></div>
    <ul>
        <li><img src="img/0.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
    </ul>
script：
    let hSb = document.querySelector("#sbox");-----------固定的照片框
    let hBb = document.querySelector("#bbox");-----------放大镜展示效果的盒子
    let hP = document.querySelector("p");-----------遮罩
    let hLi = document.getElementsByTagName("li");-------------底部其他照片

    class Mag{
   
        constructor(hSb,hBb,hP,hLi){
   -------------------传参
            this.hSb = hSb;
            this.hBb = hBb;
            this.hP = hP;
            this.hLi = hLi;
            this.dog = 0;--------------此处定义dog属性，目的是为了后续通过li下标的赋值改变大小盒子的背景图
            this.hSb.style.backgroundImage = `url(img/${
     this.dog}.jpg)`;----------小盒子背景图赋初值，用dog属性拼接，方便后续改值换图片
            this.hBb.style.backgroundImage = `url(img/${
     this.dog}.jpg)`;----------大盒子背景图赋初值
            this.eventBind();-------------整合事件调用
        }

        mouseover(){
   --------------鼠标划入事件
            let that = this;--------------下面需要写划入事件绑定，因此这里存一个this在变量that
            this.hSb.onmouseover = function(){
   -------------为小盒子绑定划入事件，达到划入显示遮罩与大盒子的效果
                that.hP.style.display = "block";
                that.hBb.style.display = "block";
            }
        }
        mouseout(){
   --------------鼠标划出事件
            let that = this;--------------下面需要写划出事件绑定，因此这里存一个this在变量that
            this.hSb.onmouseout = function(){
   ------------<