用原生js實現放大鏡的功能

這是京東上面的放大鏡功能的實例，首先說一下放大鏡功能的組成結構
包括一張大圖片，一張小圖片 ，兩個div用來實現顯示部分的內容；

基本的html樣式：

從html中可以看到big這個div包含一個bigimg的子圖片
previewimg包含一個名叫mask的子div 這非常重要；

下面是基本的css樣式：

.preview_wrap {
    width: 400px;
    height: 590px;
}

.preview_img {
    position: relative;
    height: 398px;
    border: 1px solid #ccc;
}

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #FEDE4F;
    /*更改遮罩版的半透明央視*/
    opacity: .5;
    border: 1px solid #ccc;
    cursor: move;
}

.big {
    display: none;
    position: absolute;
    left: 410px;
    top: 0;
    width: 500px;
    height: 500px;
    background-color: pink;
    z-index: 999;
    border: 1px solid #ccc;
    overflow: hidden;
}

.big img {
    position: absolute;
    top: 0;
    left: 0;
}

最後是最重要的js部分：
其中js部分的構建過程爲
1、顯示隱藏遮板和大圖片
2、使遮板跟隨鼠標移動
3、限制遮板的移動範圍
4、實現大圖片跟隨遮板進行移動
具體的js源碼如下：

window.addEventListener('load',function(){
    var preview_img =  document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 當我們鼠標經過perview-img時， 就顯示和隱藏mark遮擋層和big大盒子
    preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'block'
        big.style.display = 'block'
    })

    preview_img.addEventListener('mouseout',function(){
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    // 實現鼠標移動半透明遮板移動的效果
    preview_img.addEventListener('mousemove',function(e){
        // 獲得鼠標在盒子中的位置
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x);
        // console.log(y);
       
        // 實現限制盒子移動的
        var maskx = x-mask.offsetWidth/2;
        var masky = y-mask.offsetWidth/2;

        if (maskx < 0) {
            maskx = 0;
        }
        else if (maskx > preview_img.offsetWidth - mask.offsetWidth){
            maskx = preview_img.offsetWidth - mask.offsetWidth;
        }

        if (masky < 0) {
            masky = 0;
        }
        else if (masky > preview_img.offsetHeight - mask.offsetHeight){
            masky = preview_img.offsetHeight - mask.offsetHeight;
        }


        mask.style.left = maskx + 'px';
        mask.style.top = masky + 'px';

        // 設置大的img跟着小的img進行移動，根據公式
        //小的座標/小的最大移動座標 =  大的座標/大的最大移動座標

        // maxmaskx 爲小的最大移動座標
        var MAXmaskx = preview_img.offsetWidth - mask.offsetWidth;
        var MAXmasky = preview_img.offsetHeight - mask.offsetHeight
        // 然後獲取到bigimg
        var bigIMg = document.querySelector('.bigImg');
        var MAXbigx = bigIMg.offsetWidth - big.offsetWidth;
        var MAXbigy = bigIMg.offsetHeight - big.offsetWidth;
        var bigx = maskx*MAXbigx/MAXmaskx;
        var bigy = masky*MAXbigy/MAXmasky;
        bigIMg.style.left = -bigx+'px';
        bigIMg.style.top = -bigy+'px';

    })


})