实现jquery放大镜的两种方法

js代码

<span style="white-space:pre">  </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
  <script type="text/javascript">
    $(function () { 
      changePic('.first',0);
      changePic('.second',1);
      changePic('.third',2); 
      var shadeWidth = $('.shade').width(),//阴影的宽度
        shadeHeight = $('.shade').height(),//阴影的高度
        middleWidth = $('#container').width(),//容器的宽度
        middleHeight = $('#container').height(),//容器的高度
        bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度
        bigImgHeight = $('.shade img').height(),//放大图片盒子的高度
        rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2
        rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2 
      //当鼠标移入与移出时阴影与放大去显现/消失
      $('#container').hover(function() {
        $('.shade').show();
        $('.big').show();
      }, function() {
        $('.shade').hide();
        $('.big').hide();
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动 
        //记录下光标距离页面的距离
        var x = e.pageX,
          y = e.pageY; 
        //设置遮罩层的位置
        $('.shade').offset({
          top: y-shadeHeight/2,
          left: x-shadeWidth/2
        });    
        //获取遮罩层相对父元素的位置
        var cur = $('.shade').position(),
          _top = cur.top,
          _left = cur.left,
          hdiffer = middleHeight - shadeHeight,
          wdiffer = middleWidth - shadeWidth; 
        if (_top < 0) _top = 0;
        else if (_top > hdiffer) _top = hdiffer;
        if (_left < 0) _left = 0;
        else if (_left > wdiffer) _left =wdiffer; 
        //判断完成后设置遮罩层的范围
        $('.shade').css({
          top: _top,
          left: _left
        }); 
        //设置放大区图片移动
        $('.shade img').css({
          top: - _top*rateY*3/2,
          left: - _left*rateX*3/2
        }); 
      });; 
      //封装的改变图片显示的函数
      function changePic (element,index) {
        $(element).click(function() {
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
          $('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none');
        });
      } 
    });
<span style="white-space:pre">  </span></script>