点击图片放大至原始图片大小-白红宇

有些时候为了排版的整洁，页面展示的图片不得不都是限定宽高的，如果想要点击图片放大至原始大小进行预览，再次点击回到原来样子，就要用到下面的代码了：

                         
var
_w = parseInt($(window).width());
//获取浏览器的宽度
$(
"#abc img"
).each(
function
(i){ 
    
var
img = 
this
;
    
var
realWidth;
//真实的宽度
    
var
realHeight;
//真实的高度
    
$(
"<img/>"
).attr(
"src"
, $(img).attr(
"src"
)).load(
function
() { 
        
realWidth = 
this
.width;
        
realHeight = 
this
.height;
    
})
    
var
flag = 1;
    
$(img).on(
"click"
,
function
() { 
        
if
(flag == 1) { 
            
if
(realWidth>=_w){ 
                
$(img).css({ 
                    
"width"
: 
"100%"
,
                    
"height"
: 
"auto"
,
                    
"position"
: 
"fixed"
,
                    
"top"
: 
"50%"
,
                    
"left"
: 
"50%"
,
                    
"margin-top"
: 
"-30%"
,
                    
"margin-left"
: 
"-50%"
                
});
            
}
else
{ 
                
$(img).css({ 
                    
"width"
: realWidth,
                    
"height"
: realHeight,
                    
"position"
: 
"fixed"
,
                    
"top"
: 
"50%"
,
                    
"left"
: 
"50%"
,
                    
"margin-top"
: -realHeight / 2,
                    
"margin-left"
: -realWidth / 2
                
});
            
}
            
flag = 0;
        
} 
else
{ 
            
$(img).css({ 
                
"width"
: 500,
                
"height"
: 400,
            
});
            
flag = 1;
        
}
    
});
});
        
      

以上代码获取图片原始宽高为转载，进行加工后如上。亲测有效，但是对于图片上传后，点击方法后，貌似并不能获取到原始宽高，我想应该是load的原因，还请懂的大神多多指点，如何实现上传的图片文件，点击缩略图，放大至原始大小！！！

本文转自蓓蕾心晴 51CTO博客，原文链接：http://blog.51cto.com/beileixinqing/1881158，如需转载请自行联系原作者