Ideas and codes for realizing magnifying glass effect in js

This article example shares the specific code of js to achieve the magnifying glass effect for your reference. The specific content is as follows

Style display:

Ideas

First prepare two pictures, one small picture and one large picture, and the two pictures have an integer ratio

Set a magnifying glass style above the small picture and set the background to transparent color

Put a parent element outside the large image, and hide it if it exceeds the parent element. The size should be just enough to accommodate the magnified part. The ratio of the parent element to the magnifying glass style = the ratio of the large image to the small image.

When the mouse moves on the small picture, get the coordinates of the mouse, get the coordinates of the mouse on the small picture, calculate the coordinates of the large picture according to the corresponding ratio, and move the large picture so that the enlarged part is within the visible range of the parent element.

Code

1.html part

<div id="box">
        <!-- toBig is a magnifying glass element -->
     <div id="toBig"></div>
        <!-- Small Image -->
  <img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
        <!-- Large image, ratio is 1.5 times -->
  <img src="img/05.jpg" id="bigImg" width="1200px">
</div>

2.css style part

 *{
          margin: 0px;
          padding: 0px;
            }    
            #box{
             position: relative;
             float: left;
            }
   #toBig{
    width: 80px;
    height: 80px;
    border: 1px solid gray;
    background-color: transparent;
    position: absolute;
   }
   #beBig{
    float: left;
    overflow: hidden;
    border: 1px solid gray;
    position: relative;
    left: 40px;
    top:325px ;
   }
   #bigImg{
    position: absolute;
   }

3. Script part

<script type="text/javascript">
            //Get the small image, large image, magnifying glass element, and parent element of the large image var smallImg = document.querySelector ("#smallImg");
   var bigImg = document.querySelector("#bigImg");
   var toBig=document.querySelector("#toBig");
   var beBig=document.querySelector("#beBig");
 
            /*Calculate the ratio of small pictures to large pictures when the page is loaded*/
            var q=0;
   window.onload = function(){
    q=bigImg.offsetWidth/smallImg.offsetWidth;
                //Calculate the size of the magnified content to be displayed based on the width, height and ratio of the magnifying glass beBig.style.width = toBig.clientWidth * q + "px";
    beBig.style.height = toBig.clientHeight * q + "px";
   }
            //Get the center of the magnifying glass element and ensure that the mouse is in the center of the magnifying glass var xCenter=toBig.clientWidth/2;
   var yCenter=toBig.clientHeight/2;
 
            //flag is a sign, when the mouse is pressed it is true, you can move flag=false;
   toBig.onmousedown = function(){
    flag=true;
   }
   toBig.onmouseup = function(){
    flag=false;
   }
   
   window.onmousemove=function(ev){
    var ev = ev || window.event;
                //When flag is true, the magnifying glass element is pressed and can be dragged if (flag) {
                    //Get the current position of the mouse and calculate the position to move in addition to the element itself var mouseX=ev.clientX,mouseY=ev.clientY;
     var trueX=mouseX-xCenter;
 
                    //Judge whether the magnifying glass element exceeds the small image range if (trueX < smallImg.offsetLeft) {
      trueX = smallImg.offsetLeft;
     }
     if(trueX > smallImg.clientWidth - toBig.offsetWidth){
      trueX = smallImg.clientWidth - toBig.offsetWidth;
     }
     var trueY=mouseY - yCenter;
     if(trueY <= smallImg.offsetTop){
      trueY = smallImg.offsetTop;
     }
     if (trueY > smallImg.clientHeight - toBig.offsetHeight) {
      trueY = smallImg.clientHeight - toBig.offsetHeight;
     }
 
                    //Small picture moves toBig.style.left = trueX + "px";
     toBig.style.top = trueY + "px";
     console.log(trueX,trueY);
     
     // The position where the big picture is to be moved bigImg.style.left =-(trueX * q) + "px";
     bigImg.style.top = -(trueY * q) + "px";
    }
   }
   
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implementation process of the magnifying glass effect in the Javascript example project
JavaScript realizes magnifying glass special effects
JavaScript imitates Jingdong magnifying glass special effects
JavaScript object-oriented implementation of magnifying glass case
JavaScript imitates Jingdong magnifying glass effect
JavaScript imitates Taobao magnifying glass effect
JavaScript to achieve magnifying glass effect
JavaScript implementation of magnifying glass details

<<: Markup language - web application CSS style

>>: Docker deployment RabbitMQ container implementation process analysis