图片放大预览插件

部分css

.jdsc .imgView{
    width: 300px;
    height: 300px;
    background-size: 600px 600px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    border: 1px solid #09f;
    top: 0px;
    left: 100%;
    display: none;
}
.jdsc .imgWrap:hover{
    cursor: move;
}

页面结构：

<div class="imgWrap hp70 p10 img100 ">
    <img class="preImg" src="http://imgcdn.wenes.cn/WenesImg/Image/2018/06/06/18093632888448.jpg">
</div>
<div class="imgView"></div>

JS代码部分

imgView(".jdsc .imgWrap",3,".jdsc .imgView")
/**
 * 图片放大预览插件
 * @param el 原图片<div><img/></div>
 * @param k 图片放大系数
 * @param view 预览框大小 <div style="background-image:url(xxx.jpg)"></div>
 */
function imgView(el,k,view) {
    w1 = $(el).find("img").width();
    h1 = $(el).find("img").height();
    w2 = $(view).width();
    h2 = $(view).height();
    $(view).css("background-size",(w1*k)+"px "+(h1*k)+"px");
    $(el).mousemove(function(event){
        let px = event.clientX;
        let py = event.clientY;
        let tx = $(this).offset().left;
        let ty = $(this).offset().top;
        let left = (tx-px)*k + w2/2;
        let top = (ty-py)*k + h2/2;
        $(view).css("background-position",left+"px "+top+"px");
    });
    $(el).mouseenter(function(event){
        $(view).show();
    }).mouseleave(function(){
        $(view).hide();
    });
}