DOM操作---放大镜案例

在box盒子中设置图片为背景，在盒子中设置一个move小盒子；给move盒子绑定移动事件，使其随着鼠标运动；设置一个盒子max与move盒子成比例放大作为放大后显示的窗口，在max盒子中添加一个图片，给图片设置成与box盒子背景图成比例放大的宽高；将图片在max盒子中超出部分隐藏；每次移动mova盒子时，修改max盒子中的img的top和left使其与move盒子移动成倍的距离

注意：

1. 每个盒子成比例缩放，
2. 每个盒子都要固定定位，不然top和left不能生效。
3. 再放大显示时，窗口时动不了的，这时就只能移动图片，使其往move盒子移动的反方向运动。

    <style>

        .a{

            display: flex;

            justify-content: flex-start;

           

           

        }

        .box{

            width: 200px;

            height: 310px;

            background-image: url("https://p0.ssl.qhimgs1.com/sdr/400__/t01043eec7c54708f40.jpg");

            background-size: 100%;

            position: relative;

           

        }

        .move{

            width: 40px;

            height: 40px;

            background-color:rgb(89, 93, 93,0.5);

            position: absolute;

            display: none;

        }

       .show{

            width: 120px;

            height: 120px;

            position:relative;

        display: none;

            overflow: hidden;

            margin: 100px;

            border: 1px solid black;

           

           

           

        }

        img{

            width: 400px;

            height: 620px;

            position: absolute;

        }

    </style>

    <div class="a">

     <div class="box">

         <div class="move"></div>

     </div>

     

         <div class="max">

          <div class="show">

              <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t01043eec7c54708f40.jpg" alt="">

             

            </div>

         </div>

     

    </div>

     <script>

         var box=document.querySelector(".box")

         var move=document.querySelector(".move")

         var show=document.querySelector(".show")

         var img=document.querySelector("img")

         box.addEventListener("mouseover",function(el){

           move.style.display="block"

           show.style.display="block"

        })

         box.addEventListener("mouseout",function(){

            show.style.display="none"

            move.style.display="none"

         })

         box.addEventListener("mousemove",function(el){

             //在小图片上使move小盒子随鼠标移动

            move.style.top=el.clientY-20+"px"

           move.style.left=el.clientX-20+"px"

            //窗口动不了，将图片移动

           img.style.top=-(el.clientY-20)*2+"px"

           img.style.left=-(el.clientX-20)*2+"px"

         })

     </script>