The magnifying glass effect of imitating Taobao

Time:2020-5-27

preface

There have been a lot of things in this period of time, and there has been no time to write articles. I’ve been a little free these two days, so I’ll write an article while I’m free. The main content of this article is to introduce how the magnifying glass effect of Taobao is realized. I believe many students are not unfamiliar with this. This seemingly complex little function is actually very simple in principle. Let’s learn how to achieve the effect of Taobao magnifier.

Implementation process

Project structure

The magnifying glass effect of imitating Taobao

Our whole project structure is not complicated, which is composed of images directory, jquery-3.2.1 min.js , style.css , main.js , index.html And so on.

  • Images directory.Store the picture materials used in the project.

  • jquery-3.2.1.min.js。JQuery Library (optional if you want to familiarize yourself with native JS).

  • style.css。Controls the project CSS style file.

  • main.js。JS file that controls the logic of the project.

  • index.html。Control project DOM structure.

source material

Small graph( small.jpg )

The magnifying glass effect of imitating Taobao

Original( big.jpg )

The magnifying glass effect of imitating Taobao

Magnifying glass background (mask_ bg.jpg )

The magnifying glass effect of imitating Taobao

Implementation principle

The magnifying glass effect of imitating Taobao

The magnifying glass effect of imitating Taobao

  • Magnifier = = 100 * 100 orange squareAbbreviation: block 1

  • Left window = = 200 * 200 Blue SquareAbbreviation: block 2

  • Right window = = 200 * 200 purple squareAbbreviation: block 3

  • Original = = 400 * 400 Blue SquareAbbreviation: block 4

The general principle is as follows:
One expression is: left value (or top value) of block 1 / left value (or top value) of block 4 = (- 1) * width of block 2 / width of block 4. Here we need to note that the positioning parent of block 1 is block 2, and the positioning parent of block 4 is block 3. In addition, the length and width of the small graph are consistent with that of the left window. We can modify the top value and left value of block 4 according to the top value and left value of block 1 in equal proportion, and the part beyond the block is not visible, then we can achieve the magnifying glass effect.

Document content

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > imitation of Taobao magnifier effect < / Title >
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
    <div class="leftView">
        <div class="mask"></div>
        <img class="smallImg"/>
    </div>
    <div class="rightView">
        <img class="bigImg"/>
    </div>
</div>
</body>
<script></script>
<script></script>
</html>
  • . mask for magnifier

  • . leftview represents the left window

  • . rightview represents the right window

  • . bigimg represents the original

CSS

#container{
   position: relative;    
}
.leftView{
    position: relative;
    width: 418px;
    height: 418px;
}
.smallImg{
    max-height: 100%;
    max-width: 100%;
}
.mask{
    display: none;
    position: absolute;
    background: url(./images/mask_bg.png);
    cursor: move;
}
.rightView{
    position: absolute;
    left:458px;
    top:0;
    width:418px;
    height:418px;
    overflow:hidden; 
}
.bigImg{
    position: absolute;
    top:0;
    left:0;
}

JS module implementation

Calculate the length and width of the magnifying glass

The main reason why we need to dynamically calculate the length and width of the magnifying glass is that the length and width of the original image are uncertain. But we need to be satisfiedMagnifying glass / right window = left window / original imageThe length and width of the left window and the right window are determined, so the length and width of the magnifying glass need to be calculated according to the length and width of the original image.

  function calculateMaskWH(){
         var width=$('.leftView').width()/$('.bigImg').width()*$('.rightView').width();
         var height=$('.leftView').height()/$('.bigImg').height()*$('.rightView').height();
         $('.mask').css({
            "width":width,
            "height":height
         });
    }

Listen for mouseover and mouseout events in the left window

When the mouse is not suspended in the left window, the magnifying glass, the right window and the original image are not visible. When the mouse hovers over the left window, the magnifying glass, the right window, and the original image are visible.

//Listening for mouse mouseover events
 $('.leftView').on('mouseover',function(){
        $('.mask').css('display','block');
        $('.rightView').css('display','block');        
    });
 //Listening for mouse mouseout events  
 $('.leftView').on('mouseout',function(){
        $('.mask').css('display','none');
        $('.rightView').css('display','none');
    });

Listen for MouseMove event in the left window

To monitor MouseMove, we need to do two things. The first thing is to dynamically change the top and left values of the magnifying glass. The second thing is to change the top value and left value of the original image equally according to the top value and left value of the magnifying glass. So the difficulty here is how to calculate the top value and the left value. In addition, we should make sure that the magnifying glass cannot go out of the boundary.

$('.leftView').on('mousemove',function(event){
        //Calculate the left and top values of the magnifying glass
        var left=event.pageX-$(this).offset().left-$('.mask').width()/2;
        var top=event.pageY-$(this).offset().top-$('.mask').height()/2;
        //Judge whether the left and right magnifiers are out of bounds
        if(left<0){
            left=0
        }else if(left>$(this).width()-$('.mask').width()){
            left=$(this).width()-$('.mask').width();
        }
        //Judge whether the magnifier appears up and down
        if(top<0){
            top=0;
        }else if(top>$(this).height()-$('.mask').height()){
            top=$(this).height()-$('.mask').height();
        }
        $('.mask').css({
            left:left+'px',
            top:top+'px'
        });
        //Calculation scale
        var rate=$('.bigImg').width()/$('.leftView').width();
        $('.bigImg').css({
            left:-rate*left+'px',
            top:-rate*top+'px'
        });
    });

JS full code

$(function(){
    //Calculate the length and width of the magnifying glass
    calculateMaskWH(); 
    //Listening for mouse mouseover events
    $('.leftView').on('mouseover',function(){
        $('.mask').css('display','block');
        $('.rightView').css('display','block');        
    });
    //Listening for mouse mouseout events    
    $('.leftView').on('mouseout',function(){
        $('.mask').css('display','none');
        $('.rightView').css('display','none');
    });
    $('.leftView').on('mousemove',function(event){
        //Calculate the left and top values of the magnifying glass
        var left=event.pageX-$(this).offset().left-$('.mask').width()/2;
        var top=event.pageY-$(this).offset().top-$('.mask').height()/2;
        //Judge whether the left and right magnifiers are out of bounds
        if(left<0){
            left=0
        }else if(left>$(this).width()-$('.mask').width()){
            left=$(this).width()-$('.mask').width();
        }
        //Judge whether the magnifier appears up and down
        if(top<0){
            top=0;
        }else if(top>$(this).height()-$('.mask').height()){
            top=$(this).height()-$('.mask').height();
        }
        $('.mask').css({
            left:left+'px',
            top:top+'px'
        });
        //Calculation scale
        var rate=$('.bigImg').width()/$('.leftView').width();
        $('.bigImg').css({
            left:-rate*left+'px',
            top:-rate*top+'px'
        });
    });
    //Length and width of computer magnifier
    function calculateMaskWH(){
         var width=$('.leftView').width()/$('.bigImg').width()*$('.rightView').width();
         var height=$('.leftView').height()/$('.bigImg').height()*$('.rightView').height();
         $('.mask').css({
            "width":width,
            "height":height
         });
    }
});

Final effect demonstration

The magnifying glass effect of imitating Taobao

Recommended Today

The way of nonlinear optimization

Mathematical knowledge 1、 Nonlinear functionLinear function is another name of a function of first degree, then nonlinear function means that the function image is not a function of a straight line.Nonlinear functions include exponential function, power function, logarithmic function, polynomial function and so on. 2、 Taylor expansion1. Taylor formula:Taylor’s formula is to add a_ The […]