js实现放大镜的效果

需要实现的就是这样

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            margin: 100px 0 0 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .box img{
            width: 400px;
            height: 400px;
        }
        .box-img{
            width: 400px;
            height: 400px;
        }
        .move{
            width: 100px;
            height: 100px;
            background: rgba(0,0,0,0.3);
            position: absolute;
            left: 0;
            bottom: 0;
            cursor: crosshair;
            display: none;
        }
        .zoom{
            position: absolute;
            top: 0;
            left: 400px;
            width: 400px;
            height: 400px;
            display: none;
            overflow: hidden;
        }
        .zoom img{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

 /**
     * 思路
     *
     * 主要   move / box = zoom / big
     *
     * 1，move可以移动
     *      1-1 鼠标在box移动事件
     *      1-2 鼠标在box移动的坐标赋值给move
     *
     */
<div class="box">
    <div class="box-img">
        <img src="../assents/img.jpg">
        <span class="move"></span>
    </div>
    <div class="zoom">
        <img src="../assents/img.jpg" class="big">
    </div>
</div>

<script>
    //鼠标移入坐标区移动  对应右边内容显示
    // move / boxImg = zoom / big


    var box= document.querySelector('.box')
    var boxImg = document.querySelector('.box-img')
    var zoom = document.querySelector('.zoom')
    var move = document.querySelector('.move')
    var big = document.querySelector('.big')
    //获取box的
    var boxWidth = boxImg.offsetWidth
    var boxHeight = boxImg.offsetHeight
    //获取move的   不能一开始获取宽高，一开始display是none获取到的值为0
    var moveWidth
    var moveHeigth

    var zoomWidth
    var zoomHeigth

    var pix
    var piy

    //鼠标进入move显示
    boxImg.onmouseenter = function(){
        move.style.display = 'block'
        zoom.style.display = 'block'

        moveWidth = move.offsetWidth
        moveHeigth = move.offsetHeight

        zoomWidth = zoom.offsetWidth
        zoomHeigth = zoom.offsetHeight

        pix = moveWidth/boxWidth
        piy = moveHeigth/boxHeight

        big.style.width = zoomWidth / pix + 'px'
        big.style.height = zoomHeigth/piy + 'px'


    }
    boxImg.onmouseleave = function(){
        move.style.display = 'none'
        zoom.style.display = 'none'
    }

    //给box-img添加onmousemove一个事件
    boxImg.onmousemove = function (event) {
        var ev = event || window.event
        //鼠标相对于浏览器页面的左上角
        var clx = event.clientX
        var clY = event.clientY
        //获取box区域相对于浏览器左上角的距离
        var clx2 = box.offsetLeft
        var clY2 = box.offsetTop

        var lt = clx-clx2 - moveWidth/2
        var tp = clY-clY2- moveHeigth/2

        if(lt <= 0){
            move.style.left = "0px"
        }else if(lt >= (boxWidth - moveWidth)){
            move.style.left=(boxWidth - moveWidth) + 'px'
        }else{
            move.style.left=lt + 'px'
        }

        if(tp <= 0){
            move.style.top=0+ 'px'
        }else if(tp >= (boxHeight - moveHeigth)){
            move.style.top=(boxHeight - moveHeigth) + 'px'
        }else{
            move.style.top=tp + 'px'
        }
        //设置右边对应的显示区
        //  move相对于box-img的左边距离和要显示的区域相对于big的左边距离是比例关系
        //  move相对于box-img的上边距离和要显示的区域相对于big的上边距离是比例关系

        big.style.left = -parseFloat(move.style.left) / pix + 'px'
        big.style.top =  -parseFloat(move.style.top)/piy + 'px'
    }

</script>