jq实现放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-2.1.4.min.js"></script>

    <style>
        body,html{margin: 0;padding: 0;}
        #image{width:448px;height: 332px;background:url(1.jpg);position: relative;overflow: hidden;}
        #mouse{border:1px solid #000;background:rgba(0,0,0,0.3);width:50px;height: 50px;display: none;position: absolute;}

        #box{width:150px;height: 150px;border: 1px solid #000;display: none;}
    </style>
</head>
<body>
    <div id="image">
        <div id="mouse"></div>
    </div>

    <div id="box"></div>
    
</body>
<script>
// var  num=2;  //倍数
// $('#image').hover(function(){
//              //鼠标移入  div显示出来，  并给#box设置背景图、和放大倍数
//  $('#mouse').show();
//  $('#box').show().css({
//      "background":'url(1.jpg)',
//      "background-repeat":"no-repeat",
//      "background-size":`${448*num}px ${332*num}px`//放大倍数，不能用百分比放大
//  });

// },function(){
//  $('#mouse').hide();
//  $('#box').hide();
// })

// $('#image').mousemove(function(event){
//   //event.pageX-$('#image').offset().left    代表    event.offsetX
//   //代表屏幕的x轴-大div的左距离，也就是蓝色线
//   var x=event.pageX-$('#image').offset().left;
//   var y=event.pageY-$('#image').offset().top;
//  $('#mouse').css({
//        //给鼠标上的灰色框设置位置， -25是要让鼠标在灰色框中间
//          'left' : x-25+'px', 
//          "top"  : y-25+'px'
//  })
//  $('#box').css({
//      //设置box里背景图的位置， num代表放大的倍数 ，
//      // +75 是因为 要让放大的图片在box的中间
//      'background-position-x': -x*num+75+'px',
//      'background-position-y': -y*num+75+'px'
//  })
// })



</script>
</html>