js放大镜效果

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){
                // 当鼠标移动至主图框最顶部时，设置移动块顶部偏移量为0
                _moveT = 0;
            }else if(_moveT > bbox.offsetHeight - bmove.offsetHeight){
                // 当鼠标移至主图框底部时，设置移动块底部偏移量为主图框的高 - 移动块的高
                _moveT = bbox.offsetHeight - bmove.offsetHeight;
            }
            if(_moveL <= 0){
                // 当鼠标移动至主图框最左部时，设置移动块顶部偏移量为0
                _moveL = 0;
            }else if(_moveL >= bbox.offsetWidth - bmove.offsetWidth){
                // 当鼠标移至主图框最右部时，设置移动块底部偏移量为主图框的宽 - 移动块的宽
                _moveL = bbox.offsetWidth - bmove.offsetWidth;
            }
            // 设置移动块在主图框中的移动比例
            var w = _moveL/(bbox.offsetWidth - bmove.offsetWidth);
            var h = _moveT/(bbox.offsetHeight - bmove.offsetHeight);
            // 为大图设置相同比例的偏移量
            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";
            // 大图的偏移量设为负数
            b_bimg.style.top = -b_bimg_t + "px";
            b_bimg.style.left = -b_bimg_l + "px";
        }