DOM manipulation---magnifying glass case

在boxBox set in the picture as the background,In the box set amove小盒子;给moveBox binding mobile event,Make it with the mouse movement;设置一个盒子max与moveBox proportional amplifier as enlarged display window,在maxAdding a picture box,To set up and imagesboxBox figure is proportional to the zoom in the background of wide high;将图片在maxBeyond part of box hidden;每次移动mova盒子时,修改max盒子中的img的top和left使其与moveMultiple box distance

注意：

1. Each box is proportional to the zoom,
2. Each box fixed position,不然top和left不能生效.
3. To zoom in,When the window can't move,At this time can only move picture,Make it tomoveThe box moving in the opposite direction movement.

    <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){

             //In the small picture to makemoveSmall box with the mouse

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

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

            //The window can't move,Move the pictures

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

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

         })

     </script>