点击图片查看大图 - 温温婉婉

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

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

//点击图片-加载大图
$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;
}