Home > Article > Web Front-end > How to create a magnifying glass effect for JD product details

How to create a magnifying glass effect for JD product details

php中世界最好的语言Original: 2018-03-14 14:48:022526browse

##Main knowledge points of realizing magnifying glass

DOM operations in javascript.
The acquisition of time in JavaScript mainly includes mouseenter, mouseleave, and the onmousemove event when the mouse moves on the photo, as well as the attributes clientY, clientX, and acquisition in the event object. Element width offsetWidth, offsetHight, etc.
It is best to consider the absolute positioning and the calculation of magnification. The magnification formula used in it (the area of the magnified area in the small frame/the area of the small frame) = (large frame area/area of the large photo in the large basket) //The principle of a large photo is to put it in a large frame, and set the css style of the large frame to overflow: hidden, so that the area in your small basket can be proportional Displayed in a large frame.

The specific code implementation is as follows

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <style type="text/css">
            *{                margin: 0;                padding: 0;            }
            #small{                float: left;                width:450px;                height:450px;                border: 1px solid black;                margin-left: 100px;                position:absolute;            }
            #big{                float: left;                width:600px;                height:600px;                overflow: hidden;                border: 1px solid black;                position: absolute;                left:600px;                top: 0px;            }
            #magnifying{                width: 200px;                height:200px;                background-color: cornflowerblue;                opacity: 0.4;                left: 0px;                top: 0px;                position: absolute;            }
            #bigImg{                position: absolute;                width: 1350px;                height:1350px;            }
        </style>
    </head>
    <body>
        <p id="small">
            <img  src="img/1.png" / alt="How to create a magnifying glass effect for JD product details" >//记得将其设置与小框大小一致            <p id="magnifying"></p>
        </p>
        <p id="big">
            <img  src="img/2.jpg" id="bigImg" / alt="How to create a magnifying glass effect for JD product details" >
        </p>
        <script type="text/javascript">
            var small=document.getElementById("small");            var magnifying=document.getElementById("magnifying");            var big=document.getElementById("big");            var bigImg=document.getElementById("bigImg");

            small.onmouseenter=function(){
                magnifying.style.display="block";
                bigImg.style.display="block"
            }
            small.onmouseleave=function(){
                magnifying.style.display="none";
                bigImg.style.display="none";
            }
            small.onmousemove=function(event){
                var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2;                var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2;                var leftMax=small.offsetWidth-magnifying.offsetWidth;                var topMax=small.offsetHeight-magnifying.offsetHeight;                //限制鼠标移动的区域
                left = left<=0 ? 0 : left;
                top = top <=0? 0:top;                //限制右边界与下边界
                left =left>=leftMax?leftMax:left;
                top =top>=topMax?topMax:top;

                magnifying.style.left=left+"px";
                magnifying.style.top=top+"px";                //核心代码
                var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth);                var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
                bigImg.style.left=imgLef+"px";
                bigImg.style.top=imgTop+"px";
            }        </script>
    </body></html>

This way you can achieve the amplification effect. I hope this can be helpful to everyone.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to create a magnifying glass effect for JD product details

Related articles