原效果

代码如下

代码写的很草，勉强能看

css代码

        * {
            margin: 0;
            padding: 0;
        }
        
        .small {
            float: left;
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        
        .box {
            display: none;
            position: absolute;
            width: 200px;
            height: 200px;
            background: yellow;
            opacity: .5;
            top: 0px;
            left: 0px;
            cursor: move;
        }
        
        .big {
            position: relative;
            overflow: hidden;
            margin-left: 3px;
            float: left;
            width: 700px;
            height: 700px;
        }
        
        .imga {
            position: absolute;
        }
        
        .big img {
            max-width: 2000px;
        }
        
        .small img {
            max-width: 500px;
        }

js代码

<script>
        var content = document.querySelector('.small');
        var big = document.querySelector('.big');
        var box = document.querySelector('.box');
        var img = document.querySelector('.imga')
        content.addEventListener('mouseover', function() {
            big.style.display = 'block';
            box.style.display = 'block';
        })
        content.addEventListener('mouseout', function() {
            big.style.display = 'none';
            box.style.display = 'none';
        })
        content.addEventListener('mousemove', function(e) {
            box.style.display = 'block';
            if (e.pageX >= 400) {
                box.style.left = 300 + 'px';
                img.style.left = -1300 + 'px';
            } else if (e.pageX <= 100) {
                box.style.left = 0 + 'px';
                img.style.left = 0 + 'px';
            } else {
                box.style.left = e.pageX - 100 + 'px';
                img.style.left = '-' + (e.pageX - 100) * 4 + 'px';
            }
            if (e.pageY >= 400) {
                box.style.top = 300 + 'px';
                img.style.top = 1300 + 'px';
            } else if (e.pageY <= 100) {
                box.style.top = 0 + 'px';
                img.style.top = 0 + 'px';
            } else {
                box.style.top = e.pageY - 100 + 'px';
                img.style.top = -(e.pageY - 100) * 4 + 'px';
            }
        })
    </script>

html代码

   <div class="content">
        <div class="small">
            <img src="9.jpg" >
            <div class="box">

            </div>
        </div>
        <div class="big">
            <div class="imga">
                <img src="9.jpg" >
            </div>
        </div>
    </div>

实现效果展示