JS “magnifying glass” effect to achieve

First of all, hello, this is Sunsei! A front end pupil. Shen Xi today saw an interesting effect in the east, the hands of the mouse moved to a background picture to show the magnifying glass at the same time, the right side of the picture appeared similar to the “magnifying” effect; Follow the mouse magnifier to zoom in on the specified position. As a front-end development of primary school students excited some can not resist, the heart is only one word, “whole”.

Demand in this paper, the

  1. When the user moves the mouse over the mask layer (i.e. the magnifying glass),
  2. At the same time, a magnified image of the same position appears on the right,
  3. When the mouse moves over, the mask layer and the enlarged image are hidden.
  4. The mouse moves, the mask layer moves, and the position of the larger image moves.
  5. The mask layer can only move within the image container.

Results demonstrate

Design ideas

  • When you mouse over the image, show the mask layer and the right box
  • Hide the mask layer and the right box after moving the mouse over the image
  • When the mouse image moves, the mask layer moves with it
  • Detail 1, in the middle
  • Detail 2, boundary problem, can not go outside the image
  • Detail 3, the large picture in the right box should also move with it
    • Get the current mouse position and center the mouse in the mask
    • Border judgment
    • Sets the mask layer offset
    • The image in the right box follows the mask in reverse direction
    • Sets the offset for the larger image

Knowledge of the stack

HTML CSS simple layout +CSS background picture basic knowledge JS CSS non-row properties to get/set JS mouse event binding JS mouse coordinates and element coordinates to get/set

Code parsing

The CSS part

Simple CSS part typesetting, magnifying glass to typesetting requirements are not very high; The core part is to achieve the effect, and typography like this is not “hands on”, right?

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            position: relative;
            margin-top: 20px;
            margin-left: 40px;
        }

        .left {
            border: 1px solid #000;
            width: 400px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            background: url(./images/pic0.jpg);
            background-size: 100% 100%;
            cursor: move;
            position: relative;
        }

        .right {
            border: 1px solid #000;
            width: 400px;
            height: 500px;
            margin-top: 20px;
            margin-left: 40px;
            position: absolute;
            top: 0;
            left: 400px;
            background: url(./images/pic0.jpg) no-repeat;
            background-position-x: 0;
            background-position-y: 0;
        }

        .mark {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: pink;
            opacity: 0.3;
        }
    </style>
Copy the code

HTML part

Very simple HTML part, will build the basic deconstruction can be, commonly known as “no hands can do”.

 <div class="box">
        <div class="left">
            <div class="mark"></div>
        </div>
        <div class="right"></div>
    </div>
Copy the code

JS part

The most simple js core part, “magnifying glass” effect is essentially two pictures show hidden and margin changes (that is, move); So isn’t that easy? All you need is a small picture and a big picture. Ha ha!

<script>
        // Get the element
        var box = document.querySelector(".box");
        var left = document.querySelector(".left");
        var mark = document.querySelector(".mark");
        var right = document.querySelector(".right");
        //
        var boxleft = box.offsetLeft;
        var boxtop = box.offsetTop;


        // Move the mouse over the display
        function lover() {
            mark.style.display = "block";
            right.style.display = "block";
        }
        left.addEventListener("mouseover", lover);
        // Mouse remove hide
        function lout() {
            mark.style.display = "none";
            right.style.display = "none";
        }
        left.addEventListener("mouseout", lout);
        // Move the mouse
        function mmove(e) {
            // Calculate the distance the slider moves
            var markleft = e.clientX - box.offsetLeft - mark.offsetWidth / 2;
            var marktop = e.clientY - box.offsetTop - mark.offsetHeight / 2;
            // Calculate the distance to move the enlarged image
            var rLeft =markleft* 2160 /(left.offsetWidth - mark.offsetWidth);
            var rTop = marktop* 940 /(box.offsetHeight - mark.offsetHeight);
            // Set the distance the slider moves
            mark.style.left = markleft + "px";
            mark.style.top = marktop + "px";

            // Set the distance to move the enlarged image
            // Max move distance of mask layer = (Max move distance of mask layer * Max move distance of mask layer)/Max move distance of mask layer
            right.style.backgroundPositionX = -rLeft + "px";
            right.style.backgroundPositionY = -rTop + "px";
            // Determine where the slider moves
            / / the left border
            if (mark.offsetLeft <= 0) {
                markleft = 0;
            }
            / / right border
            if (mark.offsetLeft > left.offsetWidth - mark.offsetWidth) {
                markleft = left.offsetWidth - mark.offsetWidth;
            }
            / / on the border
            if (mark.offsetTop < 0) {
                marktop = 0;
            }
            / / lower boundary
            if (mark.offsetTop > box.offsetHeight - mark.offsetHeight) {
                marktop = left.offsetHeight - mark.offsetHeight;
            }
            mark.style.left = markleft + "px";
            mark.style.top = marktop + "px";
        }
        left.addEventListener("mousemove", mmove);
    </script>
Copy the code

The last sentence

This is small shen Xi’s own learning experience oh! A new arrival, sometimes shy; A little apprentice, learning slightly shallow; If it is not right, it is also expected to be right. I hope you who desire justice will not be stingy with your advice. See you guys.