点击图片查看大图

之前在慕课网上看到的一个关于点击图片放大显示的方法，刚好在一个项目中遇到

感觉挺有用，放这以后需要自提，哈哈哈：

//点击图片-加载大图
$scope.loadBigImg=function(imgSrc){
 
  $scope.bigImageUrl=imgSrc;    
  $scope.bigImage = true;//显示大图

  var img = new Image();

  img.onload = function(){

    var imgWidth = this.width;
    var imgHeight = this.height;

    var winWidth = win.width();
    var winHeight = win.height();

    var realw = winHeight*imgWidth/imgHeight;
    var realh = winWidth*imgHeight/imgWidth;

    var margin_left = parseInt((winWidth-realw)/2);
    var margin_top = parseInt((winHeight-realh)/2);

    if(imgHeight/imgWidth>1.2){//此处为竖图
      $('#largeImg').attr('src',imgSrc).css({
        'height':winHeight,
        'width':realw,
        'margin-left':margin_left
      });
    }else{//此处为横图
      $('#largeImg').attr('src',imgSrc).css({
        'height':realh,
        'width':winWidth,
        'margin-top':margin_top
      });
    }
  }
  img.src = imgSrc;
}