Of Stack

js self made picture magnifying glass function

  • 2021-07-15 03:40:28
  • OfStack

In this paper, we share the specific code of Android9 palace picture display for your reference. The specific contents are as follows

Note:
small img size: 600x400
big img size: 1200x800

Principle:
1. The big graph is twice the whole of the small graph
2. The big picture is centered on the center point of the small picture
a.transform : translate(-50%,-50%)
b.(rate-0.5)*50%
c. clip: rect (t, r, b, l) takes the small picture boundary as the boundary
3. rect must have absolute
4. Get the position of the mouse in the picture
a. Get mouse position XY
b. Get picture position, width, height
i. Get the percentage position of the mouse in the picture
ii. Apply the percentage position to the larger figure left, top

Question:
Centering understanding is too poor:
absolute ,left ,top,right,bottom,margin
Zoom in and out problem:
At first: transform: scale () scaling
Transition with transition
As a result, using this method can cause the mouse to move very jammed
Possible cause: transition event is triggered every time hover
Solution: Animate animation is used to realize scaling

Details:
e. pageX and e. pageY are dynamically obtained with onmouse event e
Get the picture position with $(). offset (). top/left
Get the width and height of the picture with $(). width ()/height ()
I also forgot to get the method of class in the wrong operation
$().attr("class")
$().prop("class")
event.traget.className

If you want to realize the transparent block of hover, it will be in the external opacity: 0.5; Just set z-index. 


<html>
 <head>
  <meta charset="UTF-8">
  <title>WEBGOD</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   #warpper{
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    width: 600px;
    height: 400px;
   }
   .small{
    text-align: center;
   }
   .big{
    display: none;
    clip: rect(200px,900px,600px,300px);
    position: absolute;
    width: 1200px;
    height: 800px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
   }
   .big img{
    position: absolute;
    width: 600px;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
   }
  </style>
 </head>
 <body>
   
  <div id="warpper">
   <div class="small">
    <img src="img/small_19.jpg"/>
   </div>
   <div class="big">
    <img src="img/img_19.jpg"/>
   </div>
  </div>
  <script type="text/javascript">
   $(function(){
    var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;
    $("#warpper").hover(function(){
     $(".big").css("display","block");
     $(".big img").animate({"width":"1200px"},500);
    },function(){
     $(".big img").animate({"width":"600px"},1);
     $(".big").css("display","none");
    })
    $("#warpper").on("mousemove",function(e){
     x = e.pageX;
     y = e.pageY;
     top = $(".small img").offset().top;
     left = $(".small img").offset().left;
     width = $(".small img").width();
     height = $(".small img").height();
     //
     imgWidth = $(".big img").width();
     imgHeight = $(".big img").height();
     rateX = (left+width-x)/width;
     rateY = (top+height-y)/height;
     if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){
      $(".big img").css("left",(rateX-0.5)*50+"%");
      $(".big img").css("top",(rateY-0.5)*50+"%");
     }
    })
   })
  </script>
 </body>
</html>
Related articles: