Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve the magnifying glass effect of JavaScript, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

The effect of this implementation is as follows:

This case is a little more difficult. We need to think more about css and js. Let's get started.

1. First of all, we need to plan the overall layout using html and css, that is, two adjacent boxes An and B, and a small box S in box An on the left. To achieve adjacency, my approach is to set position:absolute for both of them, and then set the values of left and top to make them adjacent.

We can also set position:absolute for the small box S and adjust the background color.

2. Then we need to use js to animate the effect, that is, when the mouse is over box A, the position of the small box S will move as the mouse moves, and the image in box B will become a magnified version of the box S overlay image. How can it be realized?

3. First, realize the position change of small box S: call the onmousemove function of box A, and pass in the parameter client, indicating that the time mouse moves over box A. We obtain the position of the mouse (clientX,clientY) through client, and then obtain the relative coordinates of the mouse on the image through (clientX-boxA.offsetLeft,clientY-boxA.offsetTop). By subtracting half of the width and height of box S from this value, we can get the position of box S in A.

However, remember to set the boundary for box S and keep its coordinates fixed when the Abscissa is 0 or the width of box A, the ordinate is 0, or the height of box A.

4. then realize that the image in box B will become a magnified version of the box S overlay image: let's first think about a question, how can this magnification effect be achieved? From the point of view of my implementation, for box B, it first needs a background image = = the image in box A, and then magnifies it by a certain multiple x. When box S moves, change the background-position of box B to y to achieve the effect of magnification + movement.

5. Finally, what are the values of x and y? (assuming that S, A, B are all in equal proportion) x: the magnification of box B should be equal to the size of A divided by the size of S, so that the same image range can be achieved. The distance change of YRV B when moving should indicate the distance of box S moving * (the size of box B divided by the size of S). You can think more.

Maybe my implementation process is more complicated, if you think of a better way, you can leave a message.

The code is as follows:

Document * {margin: 0; padding: 0;} # box {position: absolute; left: 180px; top: 100px;} # box img {width: 400px; height: 300px; border: 1px solid rgba (255,255,255,0.7) Vertical-align: bottom;} # nav {width: 480px; height: 360px; border: 1px solid rgba (255,255,255,0.7); position: absolute; left: 582px; top: 100px; background-image: url (.. / img/morn.jpg) Background-repeat: no-repeat; background-size: 250% 250%} # small {width: 160px; height: 120px; position: absolute;}

Let box = document.getElementById ("box"); let small = document.getElementById ("small"); let nav = document.getElementById ("nav"); box.onmousemove = function (client) {let x = client.clientX-box.offsetLeft; let y = client.clientY-box.offsetTop; small.style.left = x-80 + 'px'; small.style.top = y-60 +' px' Let dis_x = box.offsetLeft + box.offsetWidth-client.clientX; let dis_y = box.offsetTop + box.offsetHeight-client.clientY; nav.style.backgroundPositionX = (80-x) * 3 + 'px'; nav.style.backgroundPositionY = (60-y) * 3 +' px'; if (x-80 < 0) {small.style.left = 0 Nav.style.backgroundPositionX = 0;} if (dis_x

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.