$(document).ready(function () {
var imgsObj = $('.amplifyImg img');//需要放大的图像
if (imgsObj) {
$.each(imgsObj, function () {
$(this).click(function () {
var currImg = $(this);
coverLayer(1);
var tempContainer = $('');//图片容器
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);
//}
css('top', topHeight);//上面是适应安卓的，这是适应pc端的
html('');
} else {
css('top', 0);
html('');
}
} 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);
//}
css('top', topHeight);//上面是适应安卓的，这是适应pc端的
html('');
} else {
css('top', 0);
html('');
}
}
}
//tempContainer.click(function () {
// $(this).remove();
// coverLayer(0);
//});
show();
});
});
}
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.8)"); //蒙层透明度
}
else {
css('display', 'none');
}
}
}
function show() {
$(".tempContainer").on("click", "#body-left ", function () {
alert(1);
});
$(".tempContainer").on("click", "#body-right ", function () {
alert(2);
});
}
});————————————————
版权声明：本文为CSDN博主「你的美，让我痴迷」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45932157/article/details/104397913
