Hand in hand with you to achieve a magnifying glass effect (a) with native js:

Preface:

The effects of learning to master client, offset series of knowledge, otherwise they will be a bit confusing, you can see I wrote the previous article succinctly -offset series, scroll series, client series ~ , come to learn that article, it would be much better oh ~

The principle:

First on the layout, it is clear to prepare two basic container, a small, a big, but also to prepare two identical pictures, but of different sizes, each container into the appropriate size of the picture, but small containers also can move into a mask. The second is in the realization, step by step can be done according to the following steps.

Layout code:

<div id="box">
    <div id="small">
        <img src="./images/small.png" width="350" alt="">
        <div id="mask"></div>
    </div>
    <div id="big">
        <img src="./images/big.jpg" width="800" alt="">
    </div>
</div>
复制代码

The last style code will be labeled, do not worry -

Next, we registered the mouse enters the event (in the box you can):

box.onmouseover=function(){
    mask.style.display='block';
    big.style.display='block';
}
复制代码

Registration mouse leave event:

box.onmouseout=function(){
    mask.style.display='none';
    big.style.display='none';
}

复制代码

Then again, that is heavy and difficult and need a good understanding and digestion ~

The first step: Sign up for the event to move a small container, and let the mask with the movement of the mouse moves:

small.onmousemove=function(e){
    var x = e.clientX;
    var y = e.clientY;
    mask.style.left = x +'px';
    mask.style.top= y +'px';
}
复制代码

Results are as follows:

Question: you will find the mouse with the mask and not connected together, but it's in the upper left, and that is what causes this problem?

answer:

Plus the margin of this property in the style set to box in, so let's put this value is subtracted, and the mouse in the upper left corner mask friends ~

small.onmousemove=function(e){
    var x = e.clientX;
    var y = e.clientY;
    x = x - 50;
    y = y - 50;
    mask.style.left = x +'px';
    mask.style.top= y +'px';
}
复制代码

Step Two: Let the mouse in the center of the display mask:

To achieve this effect, it is clear that simply make the width of the mask itself moves leftward 1/2, 1/2 of the height of the upward movement of

small.onmousemove=function(e){
    var x = e.clientX-mask.offsetWidth/2;
    var y = e.clientY-mask.offsetHeight/2;
    x = x - 50;
    y = y - 50;
    mask.style.left = x +'px';
    mask.style.top= y +'px';
}
复制代码

This, you will find there has been a question of: mask can be moved anywhere on the page, obviously this does not meet our demands, we just need to move it in the small of.

The third step: Let mask moves only area where small, can not move in this area outside

To achieve this effect, and that there must be a maximum of movement, there are a minimum of moving. When it exceeds this maximum, can not continue to move, but rather holds the maximum value, if not exceed, the current value is retained, if less than this minimum value, we can not continue to move, but to maintain this minimum ~

To everyone more intuitive understanding, here I come to you to explain the drawing:

small.onmousemove=function(e){
    var x = e.clientX-mask.offsetWidth/2;
    var y = e.clientY-mask.offsetHeight/2;
    x = x - 50;
    y = y - 50;
    
    //最小值
    x = x < 0 ? 0 : x;
    y = y <0 ? 0 : y;
    
    //最大值
    x = x > small.offsetWidth-mask.offsetWidth ? small.offsetWidth-mask.offsetWidth : x;
    y = y > small.offsetHeight-mask.offsetHeight ? small.offsetHeight-mask.offsetHeight : y;
    
    mask.style.left = x +'px';
    mask.style.top= y +'px';
}
复制代码

This, mask in place has not moved beyond the small, but also in the mouse central position mask ~

Step Four: mask is moved in the small, big proportion of fine show corresponding parts

To achieve this effect, they have to figure out a proportional relationship, let me give an example:

The reason I give this example, because there is a corresponding proportional relationship between small and big, and this is the crux of the magnifying glass effect to achieve.

We can know the distance and the maximum distance mask to move, you can know the maximum distance big picture move, if you ask them to enlarge the distance moved can be!

Ratio: moving distance of the mask from / to enlarge the maximum movement distance = maximum moving distance / large mask of FIG.

So: The maximum distance of movement of the moving enlarge the maximum movement distance = / mask * large moving distance of the mask of FIG distance

To the horizontal axis, for example:

  • Moving distance of the mask: x
  • Larger maximum movement distance of: big.children [0] .offsetWidth - big.offsetWidth
  • The maximum moving distance mask: small.offsetWidth - mask.offsetWidth

The mobile FIG large distance can be calculated out ~

Above, the maximum movement of the moving distance and the third point of the mask from the first point of the mask are explained above, but the maximum moving distance of the big picture may be some people still can not understand, that I am here to explain, to enlarge the container FIG width of the box is not large width greater, so it is well understood that ~

small.onmousemove=function(e){
    var x = e.clientX-mask.offsetWidth/2;
    var y = e.clientY-mask.offsetHeight/2;
    x = x - 50;
    y = y - 50;
    
    //最小值
    x = x < 0 ? 0 : x;
    y = y <0 ? 0 : y;
    
    //最大值
    x = x > small.offsetWidth-mask.offsetWidth ? small.offsetWidth-mask.offsetWidth : x;
    y = y > small.offsetHeight-mask.offsetHeight ? small.offsetHeight-mask.offsetHeight : y;
    
    mask.style.left = x +'px';
    mask.style.top= y +'px';
    
    var maskMoveMaxX = small.offsetWidth - mask.offsetWidth;
    var maskMoveMaxY = small.offsetHeight - mask.offsetHeight;
    var bigMoveMaxX = big.children[0].offsetWidth - big.offsetWidth;
    var bigMoveMaxY = big.children[0].offsetHeight - big.offsetHeight;

    var bigImgX = x * bigMoveMaxX / maskMoveMaxX;
    var bigImgY = y * bigMoveMaxY / maskMoveMaxY;
}
复制代码

Step 5: moving from the big picture is assigned to a negative margin:

Here you might be wondering, (1) Why is a negative margin?

We can look into a number of shopping sites magnifying glass effect, when the mask moves to the right on a small map, in fact, big picture is moved to the left, the direction is opposite, so of course a negative margin slightly ~

(2) Why do you want to calculate the results of that assignment to the margin, rather than the left, or top it?

You can first try, try to know why. Because we are just to big to set the location, it flows out of the document, but the contents inside and not out of the document flow, so the value of the top left does not work, so we use margin.

small.onmousemove=function(e){
    var x = e.clientX-mask.offsetWidth/2;
    var y = e.clientY-mask.offsetHeight/2;
    x = x - 50;
    y = y - 50;
    
    //最小值
    x = x < 0 ? 0 : x;
    y = y <0 ? 0 : y;
    
    //最大值
    x = x > small.offsetWidth-mask.offsetWidth ? small.offsetWidth-mask.offsetWidth : x;
    y = y > small.offsetHeight-mask.offsetHeight ? small.offsetHeight-mask.offsetHeight : y;
    
    mask.style.left = x +'px';
    mask.style.top= y +'px';
    
    var maskMoveMaxX = small.offsetWidth - mask.offsetWidth;
    var maskMoveMaxY = small.offsetHeight - mask.offsetHeight;
    var bigMoveMaxX = big.children[0].offsetWidth - big.offsetWidth;
    var bigMoveMaxY = big.children[0].offsetHeight - big.offsetHeight;

    var bigImgX = x * bigMoveMaxX / maskMoveMaxX;
    var bigImgY = y * bigMoveMaxY / maskMoveMaxY;
    
    big.children[0].style.marginLeft = -bigImgX +'px';
    big.children[0].style.marginTop = -bigImgY +'px';
}
复制代码

Well, here's all logic code all over you, I hope for your help ~

As I type the code is not posted here, you can go to download it on my yard cloud code Clouds

Reproduced in: https: //juejin.im/post/5cfe2e55518825225162cfbd

Guess you like

Origin blog.csdn.net/weixin_34408717/article/details/93180651