<html>
<head>
<style>
.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;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="over"></div><!--背景层-->
<div class="logoImg amplifyImg"><!--注意:此处的amlifyImg不可少-->
<img src="test.jpg"/><!-- 此处是引入图片的路径 -->
</div>
<script>
$(document).ready(function () {
var imgsObj = $('.amplifyImg img');//需要放大的图像
if (imgsObj) {
$.each(imgsObj, function () {
$(this).click(function () {
var currImg = $(this);
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");
var currImgWidth = orignImg.width;
var currImgHeight = orignImg.height;
if (currImgWidth < windowWidth) {//为了让图片不失真,当图片宽度较小的时候,保留原图
if (currImgHeight < windowHeight) {
var topHeight = (windowHeight - currImgHeight) / 2;
if (topHeight > 35) {/*此处为了使图片高度上居中显示在整个手机屏幕中:因为在android,ios的微信中会有一个title导航,35为title导航的高度*/
topHeight = topHeight - 35;
css('top', topHeight);
} else {
css('top', 0);
}
html('<img border=0 src=' + currImg.attr('src') + '>');
} else {
css('top', 0);
html('<img border=0 src=' + currImg.attr('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 + ';>');
} else {
css('top', 0);
html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '; height=' + windowHeight + '>');
}
}
}
tempContainer.click(function () {
$(this).remove();
coverLayer(0);
});
});
});
} else {
return false;
}
//使用禁用蒙层效果
function coverLayer(tag) {
with ($('.over')) {
if (tag == 1) {
css('height', $(document).height());
css('display', 'block');
css('opacity', 1);
css("background-color", "#FFFFFF");
css("background-color", "rgba(0,0,0,0.7)"); //蒙层透明度
} else {
css('display', 'none');
}
}
}
});
</script>
</body>
</html>