图片放大跟随鼠标移动

image-zoom-with-mouse-movements.js

$(document.body).append('<div id="zoom" style="background-image:'+$(this).css('background-image')+'"></div>');
                		
        var $offset = $slidea.offset();

        $('#zoom').css({'width':$slidea.width(),'height':$slidea.height(),'left':$offset.left,'top':$offset.top});

        $('#zoom').animate({left:0,top:0,bottom:0,right:0,height:'100%',width:'100%'}, 500, function() {

          var $source = $('#zoom'),
              offset = $source.offset(),
            sourceWidth = $source.outerWidth(),
        	sourceHeight = $source.outerHeight(),
        	xRatio = ($img[0].naturalWidth - sourceWidth) / sourceWidth,
        	yRatio = ($img[0].naturalHeight - sourceHeight) / sourceHeight;

            $('#zoom').mousemove(function(e) {

              var left = (e.pageX - offset.left),
          top = (e.pageY - offset.top);

          top = Math.max(Math.min(top, sourceHeight), 0);
          left = Math.max(Math.min(left, sourceWidth), 0);

              $(this).css({'background-size':'initial','background-position-x':(left * -xRatio),'background-position-y':(top * -yRatio)});

            });

            $('#zoom').click(function(){
              $(this).animate({opacity:0}, 500, function() {
                  $(this).remove();
                });
            });

});