JavaScript implements the most complete code analysis of a simple magnifying glass (ES5)

This article shares the specific code of JavaScript to implement a simple magnifying glass for your reference. The specific content is as follows

Full code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ES5 Magnifier</title>
    <style>
        .box {
            width: 170px;
            height: 180px;
            margin: 100px 200px;
            border: 1px solid #ccc;
            position: relative;
        }
        .small {
            position: relative;
        }
        .big {
            width: 300px;
            height: 320px;
            position: absolute;
            top: 30px;
            left: 220px;
            overflow: hidden;
            border: 1px solid #ccc;
            display: none;
        }
        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255,255,0,0.3);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .bigimg{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="small">
            <img src="img/shirt_1.jpg" alt="picture"/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="img/shirt_1_big.jpg" alt="picture"/>
        </div>
    </div>
</body>
<script>
 var box = document.getElementById('box');
 var small = box.children[0];//Box for small images var big = box.children[1];//Box for enlarged images var mask = small.children[1];//Translucent mouse moves to follow the box var bigImage = big.children[0];//Big image small.onmouseover = function(event){
     big.style.display = 'block';
     mask.style.display = 'block';
 }
 small.onmouseout = function(){
     big.style.display = 'none';
     mask.style.display = 'none';
 }
 //Move event, note that the positioning of mask is relative to samplel
 small.onmousemove = function(event){
     var event = event || window.event; //Event object // console.log(this.offsetLeft); //0, note that the distance returned by offsetLeft is the left distance of the parent with positioning var x = event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2; //Small offsetLeft cannot be used here, use obj offsetLeft
     var y = event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
     //Limit the translucent box out of bounds if (x < 0) {
         x = 0;
     }else if(x > small.offsetWidth - mask.offsetWidth){
         x = small.offsetWidth - mask.offsetWidth;
     }
     if( y < 0){
         y = 0;
     }else if( y > small.offsetHeight - mask.offsetHeight){
         y = small.offsetHeight - mask.offsetHeight;
     }
     mask.style.left = x + "px";
     mask.style.top = y + "px";
     // Enlarge the big picture bigImage.style.left = -x*big.offsetWidth/small.offsetWidth + 'px';
     bigImage.style.top = -y*big.offsetHeight/small.offsetHeight + 'px';
     //big.offsetWidth/small.offsetWidth is the magnification factor //Because the mouse moves down for the small picture and up for the large picture, a negative number is used}
</script>
</html>

picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: