jQuery를 사용하여 그림 돋보기 구현

              <div>
                     <!-- 盒子中的图片 -->
                     <img src="img/1.jpg" alt="">
                     <!—定义一个盒子来存放放大镜 -->
                     <div></div>
              </div>
              <!—定义一个盒子来存放放大后图片-->
              <div>
                     <img src="img/1.jpg" alt="">
              </div>

*{
              margin: 0;
              padding: 0;
}

.small{
                     position: relative;
                     height: 400px;
                     margin-left: 5px;
              }

.small img{
                     height: 360px;
                     width:  620px;
              }

.box{
                     position: absolute;
                     background: rgba(254, 238, 167, .4);
                     left:0;
                     top: 0;
                     display: none;
                     cursor: crosshair;
              }

.big{
                     position:absolute;
                     top: 0px;
                     left:410px;
                     width: 600px;
                     height: 360px;
                     overflow: hidden;
                     display: none;
              }

.big img{
                     position: relative;
              }

$('.box').show();
$('.big').show();

var width = $('.small img').width();
var height=$('.small img'). height ();

var Bwidth = $('.big img').width();
var Bheight = $('.big img').height();

$('.small').css('width',width+'px');

var Hwidth = ($('.big').width())/Bwidth*($('.small').width());
var Hheight = ($('.big').height())/Bheight*($('.small').height());

$('.box').css({'width':Hwidth + 'px','height':Hheight + 'px'});

$('.small').mousemove(function(e){
//获取鼠标的位置，代码如下：
var x = e.clientX;
var y = e.clientY;
//设置鼠标在放大镜盒子的中心上，代码如下：
var xx = x - $('.box').width()/2;
var yy = y -$('.box').height()/2;
//设置使放大镜盒子不可以出边框，代码如下：
var maxX = $('.small').width()-$('.box').width();
var maxY = $('.small').height()-$('.box').height();
if (xx<0) {
    xx = 0;
}
if (xx>maxX) {
    xx = maxX;
}
if (yy<0){
    yy = 0;
}
if (yy>maxY){
    yy = maxY;
}
$(&#39;.box&#39;).css({&#39;left&#39;:xx + &#39;px&#39;,&#39;top&#39;:yy + &#39;px&#39;});
//查看放大的倍数，及大图的移动距离，放大的图片的移动距离为放大镜盒子移动的距离*放大的倍数。代码如下：
var img_x = xx * ($(&#39;.big img&#39;).width()/$(&#39;.small img&#39;).width());
var img_y = yy * ($(&#39;.big img&#39;).height()/$(&#39;.small img&#39;).height());
//设置放大的图片的移动。代码如下：
$(&#39;.big img&#39;).css({&#39;left&#39;:-img_x + &#39;px&#39;,&#39;top&#39;:-img_y + &#39;px&#39;});
//创建当鼠标移入到小图的盒子时事件，将放大镜盒子和大图盒子进行隐藏。代码如下：
$(&#39;.small&#39;).mouseout(function(){
       $(&#39;.box&#39;).hide();
       $(&#39;.big&#39;).hide();
}) 
})