JS magnifier effect

Time:2019-12-2

When shopping on the Internet, we can see the pictures more clearly through the magnifier effect. Today, I’ll share the magnifier effect I learned

The picture below is the original picture. The picture below is the effect of putting the mouse on it

                  

 

 

Let’s take a look at how the magnifier effect is achieved

1. First of all, let’s write out the div layout

2. CSS

/*Active; display: inline block; / * ma * background image: URL (".. / img / bhh. JPG"); * // *} * / ාbug1 img{    width: 100%;    height: 100%;    display: block;}#ball{    width: 150px;    height: 150px;    position: absolute;    top:0;    left: 0;    background-color: navajowhite;    opacity: 0.3;    /*display: none;*/}#mask{    width:100%;    height: 100%;    position: absolute;    top:0;    left: 0;    z-index: 5;    cursor: pointer;}#bimg{    pos ition: relative;    margin-left: 300px;    margin-top: 100px;}#imgs img{    width: 70px;    height: 70px;    float: left;    border: 2px solid transparent;    margin-left: 2px;    margin-top: 2px;    position: relative;    /*margin-left: 400px;*/}#imgs img:first-child{    margin-left: 0;}#imgs img:hover{    border: 2px solid gray;}#bug2{    /**/     width: 376px;    height: 350px;    position: relative;    top:-355px;    left: 1px;    overflow: hidden;    display: none;    z-index: 4;}#bug2 img{    width: 400%;    height: 400%;    display: block;    border: none;    position: absolute;    z-index: 2;}

3. The last part is JS code

// magnifying glass
        var bug = document.getElementById("bug");
        var img1= document.getElementById("img1")
        var img2= document.getElementById("img2")
        var img3= document.getElementById("img3")
        var img4= document.getElementById("img4")
        var img5= document.getElementById("img5")

        img1.addEventListener("mousemove",function () {
            bug.src="https://www.cnblogs.com/sqbm1769294925/img/b2.jpg"
        })
        img2.addEventListener("mousemove",function () {
            bug.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb.jpg"
        })
        img3.addEventListener("mousemove",function () {
            bug.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb1.jpg"
        })
        img4.addEventListener("mousemove",function () {
            bug.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb2.jpg"
        })
        img5.addEventListener("mousemove",function () {
            bug.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb3.jpg"
        })

        var bug1 = document.getElementById("bug1");
        var ball = document.getElementById("ball");
        var bug2= document.getElementById("bug2");
        var rightImg = document.getElementById("pic");

        img1.addEventListener("mousemove",function () {
            rightImg.src="https://www.cnblogs.com/sqbm1769294925/img/b2.jpg"
        })
        img2.addEventListener("mousemove",function () {
            rightImg.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb.jpg"
        })
        img3.addEventListener("mousemove",function () {
            rightImg.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb1.jpg"
        })
        img4.addEventListener("mousemove",function () {
            rightImg.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb2.jpg"
        })
        img5.addEventListener("mousemove",function () {
            rightImg.src="https://www.cnblogs.com/sqbm1769294925/img/bbbb3.jpg"
        })
        bug1.onmousemove =function (event) {
                Var e = event | window. Event; // get the mouse object
                ball.style.display="block";
                bug2.style.display="block";
                //Mouse Center
                Var x = (e.offsetx | e.layerx) - ball.offsetwidth / 2 // offsetwidth get the width of the ball
                var y = (e.offsetY || e.layerY) - ball.offsetHeight/2
                if(x<=0){
                    x=0;
                }else if(x>box.clientWidth-ball.offsetWidth){
                    x=box.clientWidth-ball.offsetWidth
                }
                if(y<=0){
                    y=0;
                }else if(y>box.clientHeight-ball.offsetHeight){
                    y=box.clientHeight-ball.offsetHeight
                }
                ball.style.left=x+"px";
                ball.style.top=y+"px";
        //Quadruple size
                rightImg.style.left= x*-4 +"px"
                rightImg.style.top= y*-4 +"px";


                this.onmouseout =function () {
                    ball.style.display="none";
                    bug2.style.display="none";
                }
            }