html

<div id="box">
        ![](img/1.jpg)
        <div id="move"></div>
        <div class="bimg">
            ![](img/1.jpg)
        </div>
    </div>

css

*{margin: 0;padding: 0;}
    #box{position: relative;width: 430px;height: 430px;margin: 100px 0 0 300px;}
    #box>img{width: 100%;height: 100%;}
    #move{width: 200px;height: 200px;border:1px solid #dcdcdc;background: #fff;opacity: .6;position: absolute;left: 0;top: 0;display: none;box-sizing: border-box;}
    .bimg{width: 430px;height: 430px;overflow: hidden;position: absolute;top: 0;left: 430px;display: none;}
    .bimg>img{width: 930px;height: 930px;position: absolute;top: 0;left: 0;}

js

                var bbox = document.getElementById('box');
        var bmove = document.getElementById('move');
        var bbimg = document.getElementsByClassName('bimg')[0];
        var b_bimg = document.getElementById('b_img');
        bbox.onmouseover = function(){
            // 鼠標移入顯示移動塊和大圖層
            bmove.style.display = "block";
            bbimg.style.display = "block";
        } 
        bbox.onmouseout = function(){
            // 鼠標移入隱藏移動塊和大圖層
            bmove.style.display = "none";
            bbimg.style.display = "none";
        }
        bbox.onmousemove = function(e){
            //獲取鼠標相對于視口的位置
            var shubiaoX = e.clientX;
            var shubiaoY = e.clientY;
            // 獲取主圖框相對于視口的偏移量
            var boxL = box.offsetLeft;
            var boxT = box.offsetTop;
            // 獲取移動塊的可見高寬、高度
            var moveW = bmove.offsetWidth;
            var moveH = bmove.offsetHeight;
            // 計算移動塊的偏移量（鼠標的位置 - 主圖框的偏移量 - 移動塊/2的寬或高凌唬，為了讓鼠標定位在移動塊的中間部分）
            var _moveT = shubiaoY - boxT - moveH/2;
            var _moveL = shubiaoX - boxL - moveW/2;
            if(_moveT <= 0){
                // 當鼠標移動至主圖框最頂部時列吼，設(shè)置移動塊頂部偏移量為0
                _moveT = 0;
            }else if(_moveT > bbox.offsetHeight - bmove.offsetHeight){
                // 當鼠標移至主圖框底部時箱熬，設(shè)置移動塊底部偏移量為主圖框的高 - 移動塊的高
                _moveT = bbox.offsetHeight - bmove.offsetHeight;
            }
            if(_moveL <= 0){
                // 當鼠標移動至主圖框最左部時墩划，設(shè)置移動塊頂部偏移量為0
                _moveL = 0;
            }else if(_moveL >= bbox.offsetWidth - bmove.offsetWidth){
                // 當鼠標移至主圖框最右部時韧献，設(shè)置移動塊底部偏移量為主圖框的寬 - 移動塊的寬
                _moveL = bbox.offsetWidth - bmove.offsetWidth;
            }
            // 設(shè)置移動塊在主圖框中的移動比例
            var w = _moveL/(bbox.offsetWidth - bmove.offsetWidth);
            var h = _moveT/(bbox.offsetHeight - bmove.offsetHeight);
            // 為大圖設(shè)置相同比例的偏移量
            var b_bimg_t = (b_bimg.offsetHeight - bbimg.offsetHeight)*h;
            var b_bimg_l = (b_bimg.offsetWidth - bbimg.offsetWidth)*w;
            bmove.style.top = _moveT + "px";
            bmove.style.left = _moveL + "px";
            // 大圖的偏移量設(shè)為負數(shù)
            b_bimg.style.top = -b_bimg_t + "px";
            b_bimg.style.left = -b_bimg_l + "px";
        }