JavaScript代码:
function coverLayer(tag) {
with ($('.over')) {
if (tag == 1) {
css('height', $(document).height());
css('display', 'block');
css('opacity', 1);
css("background", "rgba(220,220,220,0.5)");
}
else {
css('display', 'none');
}
}
}
function OpenTu(src) {
//var currImg = $('.amplifyImg img');
coverLayer(1);
var tempContainer = $('<div class=tempContainer></div>');//图片容器
with (tempContainer) {//width方法等同于$(this)
appendTo("body");
var windowWidth = $(window).width();
var windowHeight = $(window).height();
//获取图片原始宽度、高度
var orignImg = new Image();
//orignImg.src = currImg.attr("src");
orignImg.src =src;
orignImg.onload = function() {
var currImgWidth = orignImg.width;
var currImgHeight = orignImg.height;
if (currImgWidth < windowWidth) {//为了让图片不失真,当图片宽度较小的时候,保留原图
if (currImgHeight < windowHeight) {
var topHeight = (windowHeight - currImgHeight) / 2;
if (topHeight > 35) {
topHeight = topHeight - 35;
css('top', topHeight);
} else {
css('top', 0);
}
//html('<img border=0 src=' + currImg.attr('src') + '>');
html('<img border=0 src=' + src + '>');
} else {
css('top', 0);
//html('<img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '>');
html('<img border=0 src=' + src + ' height=' + windowHeight + '>');
}
} else {
var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
if (currImgChangeHeight < windowHeight) {
var topHeight = (windowHeight - currImgChangeHeight) / 2;
if (topHeight > 35) {
topHeight = topHeight - 35;
css('top', topHeight);
} else {
css('top', 0);
}
//html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + ';>');
html('<img border=0 src=' + src + ' width=' + windowWidth + ';>');
} else {
css('top', 0);
//html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '; height=' + windowHeight + '>');
html('<img border=0 src=' + src + ' width=' + windowWidth + '; height=' + windowHeight + '>');
}
}
}
}
$(".over").click(function () {
$('.tempContainer').remove();
coverLayer(0);
});
tempContainer.click(function () {
$('.tempContainer').remove();
coverLayer(0);
});
}
html代码:
<div class="over"></div><!--背景层-->
<div class="logoImg amplifyImg">
<!--注意:此处的amlifyImg不可少-->
@*<img id="img_1" src="~/data/res/03/12321.jpg" />*@
</div>
css代码
.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
开始加载图片的时候遇到了一点问题。
读取不到图片的width,height,每次第一次加载宽高都是0,后来一番功夫才发现在onload之后再去获取就能直接得到