Magnifying glass effect to achieve product images:

   <div class="product_intro container clearfix">

        <div class="product_img">

            <div class="product_img_1">

                <div class="mask"></div>

                <div class="show_big">

                    <img src="upload/big.jpg" class="big" alt="">

                </div>

                <img src="upload/s3.png" alt=""></div>

            <div class="show_images">

                <a href="javascript:;" class="left_span"></a>

                <a href="javascript:;" class="right_span"></a>

                <ul>

                    <li><img src="upload/pre.jpg" alt=""></li>

                    <li><img src="upload/pre.jpg" alt="" class="current"></li>

                    <li><img src="upload/pre.jpg" alt=""></li>

                    <li><img src="upload/pre.jpg" alt=""></li>

                    <li><img src="upload/pre.jpg" alt=""></li>

                </ul>

            </div>

        </div>

        <script>

            var mask = document.querySelector('.mask');

            var show_big = document.querySelector('.show_big');

            var product_img_1 = document.querySelector('.product_img_1');

            product_img_1.addEventListener('mouseover', function() {

                mask.style.display = 'block';

                show_big.style.display = 'block';

            })

            product_img_1.addEventListener('mouseout', function() {

                mask.style.display = 'none';

                show_big.style.display = 'none';

            })

            var pro_img_width = product_img_1.offsetWidth;

            var pro_img_height = product_img_1.offsetHeight;

            product_img_1.addEventListener('mousemove', function(e) {

 

                var x = e.pageX - this.offsetLeft;

                var y = e.pageY - this.offsetTop;

                var mask_width = mask.offsetWidth;

                var mask_height = mask.offsetHeight;

                var maskmaxX = this.offsetWidth - mask_width;

                var maskmaxY = this.offsetHeight - mask_height

                var maskX = x - mask_width / 2;

                var maskY = y - mask_width / 2;

                if (maskX <= 0) {

                    maskX = 0;

                } else if (maskX >= maskmaxX) {

                    maskX = maskmaxX;

                }

                if (maskY <= 0) {

                    mask = 0;

                } else if (maskY >= maskmaxY) {

                    Masky = maskmaxY;

                }

                mask.style.left = maskX + 'px';

                mask.style.top = mask + 'px';

         

// big picture of the moving distance moved from the shield layer * = big picture maximum movement distance / movement distance of maximum occlusion layer

                var big = document.querySelector('.big')

                console.log(big.offsetWidth)

                var bigmaxX = show_big.offsetWidth - big.offsetWidth;

                var bigmaxY = show_big.offsetHeight - big.offsetHeight;

                var bigX = maskX * bigmaxX / maskmaxX;

                var = mask BIGY * BigMax / maskmaxY;

                big.style.left = bigX + 'px';

                big.style.top = bigY + 'px';

            })