Special effect of js magnifier

When shopping in the online shopping mall in peacetime, we can use magnifying glass effect to make our pictures more clear. Today I will share with you the magnifying glass effect I learned.

The following picture is the original image... The following picture is the effect of the mouse on it.

                  

 

 

Next, let's see how the magnifying effect is achieved.

1. First, let's write out the div layout.

<div class="bfdj">
    <div id="box">
        <div id="bug1">
            <img src="../img/b2.jpg" alt="" id="bug">
            <div id="ball"></div>
            <div id="mask"></div>
        </div>

        <div id="bug2">
            <img src="../img/b2.jpg" id="pic">
        </div>
    </div>
    <!--Five small pictures-->
    <div id="bimg">
        <div id="imgs">
            <img src="../img/b2.jpg" alt="" id="img1">
            <img src="../img/bbbb.jpg" alt="" id="img2">
            <img src="../img/bbbb1.jpg" alt="" id="img3">
            <img src="../img/bbbb2.jpg" alt="" id="img4">
            <img src="../img/bbbb3.jpg" alt="" id="img5">
        </div>
    </div>
</div>
<script src="../js/bf.js"></script>

2. The next is the css section.

/*Magnifier*/
*{
margin: 0;
padding: 0;
}
.bfdj{
width: 100%;
height: 570px;
/**/
}
#box{
width: 375px;
height: 350px;
position: relative;
margin-left: 300px;
top:100px;
/*right: ;*/
/**/
}
#bug1{
width: 376px;
height: 350px;
border: 1px solid gainsboro;
position: relative;
display: inline-block;
/*margin-left: 200px;*/
/**/
}
/*.box-right{*/
/*position: absolute;*/
/*float: right;*/
/**/
/*margin-left: 680px;*/
/*margin-top: -250px;*/
/*width: 600px;*/
/*height: 425px;*/
/*font-size: 16px;*/
/*font-family: Microsoft Yahei;*/
/*border: 1px solid lightgrey;*/
/*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{
position: 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. Finally, part of the js code

        //Magnifier
        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="../img/b2.jpg"
        })
        img2.addEventListener("mousemove",function () {
            bug.src="../img/bbbb.jpg"
        })
        img3.addEventListener("mousemove",function () {
            bug.src="../img/bbbb1.jpg"
        })
        img4.addEventListener("mousemove",function () {
            bug.src="../img/bbbb2.jpg"
        })
        img5.addEventListener("mousemove",function () {
            bug.src="../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="../img/b2.jpg"
        })
        img2.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb.jpg"
        })
        img3.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb1.jpg"
        })
        img4.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb2.jpg"
        })
        img5.addEventListener("mousemove",function () {
            rightImg.src="../img/bbbb3.jpg"
        })
        bug1.onmousemove =function (event) {
                var e = event || window.event; //Getting mouse objects
                ball.style.display="block";
                bug2.style.display="block";
                //Mouse centered
                var x = (e.offsetX || e.layerX) - ball.offsetWidth/2//offsetWidth Gets 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";
        //Four times the size
                rightImg.style.left= x*-4 +"px"
                rightImg.style.top= y*-4 +"px";


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

Tags: Javascript

Posted on Thu, 03 Oct 2019 16:51:51 -0400 by brain