JavaScript image zoom preview effect

Time:2020-12-4

Code implementation:

Document
    
        .preview-img {
            position: relative;
            height: 398px;
        }
        
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: skyblue;
            opacity: .4;
            border: 1px solid #ccc;
            cursor: move;
        }
        
        .big {
            overflow: hidden;
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 99;
            border: 1px solid #ccc;
        }
        
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    



    
        window.addEventListener('load', function() {
            var preview_img = document.querySelector('.preview-img');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            //Show and hide
            preview_img.addEventListener('mouseover', function() {
                mask.style.display = 'block';
                big.style.display = 'block';
            });
            preview_img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            });
            //The box follows the mouse
            preview_img.addEventListener('mousemove', function(e) {
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
                var maskMax = preview_img.offsetHeight - mask.offsetHeight;
                if (maskX <= 0) {
                    maskX = 0;
                } else if (maskX >= maskMax) {
                    maskX = maskMax;
                }
                if (maskY <= 0) {
                    maskY = 0;
                } else if (maskY >= maskMax) {
                    maskY = maskMax;
                }
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';

                //Large drawing, calculate coordinates according to scale
                var bigImg = document.querySelector('.bigImg');
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                var bigX = bigMax * maskX / maskMax;
                var bigY = bigMax * maskY / maskMax;
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            });
        });

Implementation effect:

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]