有些时候为了排版的整洁，页面展示的图片不得不都是限定宽高的，如果想要点击图片放大至原始大小进行预览，再次点击回到原来样子，就要用到下面的代码了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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，如需转载请自行联系原作者
