jquery to achieve picture magnifying glass effect

In this paper, we share the specific code of jquery to achieve the effect of picture magnifying glass for your reference, the specific contents are as follows

The first is HTML

<div id="box">
    <div id="big">
      <div>
        <img src="./img/ Kodak duck .jpg" alt="">
      </div>
      <div id="fd"></div>
    </div>
    <div id="fdshow">
      <img src="./img/ Kodak duck .jpg" alt="">
    </div>
</div>

This is mainly to put two photos and an empty label for enlargement

Next is the css style, which is very important here. Can you successfully enlarge it and occupy about 60% here

<style>
    *{
      margin: 0px;
      padding: 0px;
    }
    #box{
      position: relative;
    }
    #big{
      width: 500px;
      height: 300px;
    }
    #big img{
      width: 500px;
      height: 300px;
    }
    #fd{
      width: 100px;
      height: 100px;
      background-color: white;
      opacity: 0.4;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    #fdshow{
      width: 200px;
      height: 200px;
      overflow: hidden;
      position: relative;
      border: 1px solid;
    }
    #fdshow>img{
      width: 1000px;
      height: 600px;
      position: absolute;
      top: 0px;
      left: 0px;
    }
</style>

Next is jq

<script>
    $("#big img").on("mousemove",function(a){
      var x=a.pageX-$("#big").offset().left;
      var y=a.pageY-$("#big").offset().top;
      console.log(x,y)
      var style1={
        top:y,               
        left:x,
        "display":"block"
      };
      $("#fd").css(style1);
      var style2={ 
        'left':-2*x,
  'top':-2*y
      };
      $("#fdshow>img").css(style2)
    })
</script>

The effect is magnified by 2 times (the requirements for css style are particularly strict)

1. css style large picture is twice as large as small picture

2. Set 1 div on the outside of the big picture, set 1 div twice that of the selected picture, and then set 1 overflow part to hide overflow: hidden on the div of the big picture;

3. Get the position of the mouse within the element

(1). Gets the position of the mouse relative to the document
(2). Then get the position of the element in the current visual area
(3). The position of the mouse within the element = = the position of the mouse relative to the document minus the position of the retrieved element in the current visual area

4. Add the position to the zoom frame, which is the position of the mouse in the element. This step achieves the zoom frame. Go with the mouse

5. Adding the top left value to a large picture is the offset

e == > event in js
Gets the position of the mouse within the element

(1). Gets the position of the mouse relative to the document
(2). Then get the position of the element in the current visual area
(3). The position of the mouse within the element = = the position of the mouse relative to the document minus the position of the retrieved element in the current visual area
Because the large picture written in the css style above is twice as large as the small picture, the offset change here should also be twice as large