js代码
$('img').click(function () {
var imgsrc = $(this).attr("src");
console.log(imgsrc);
var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" src="' + imgsrc + '"></div>';
$(document.body).append(opacityBottom);
toBigImg();
});
function toBigImg() {
$(".opacityBottom").addClass("opacityBottom");
$(".opacityBottom").show();
$("html,body").addClass("none-scroll");
$(".bigImg").addClass("bigImg");
$(".opacityBottom").click(function () {
$("html,body").removeClass("none-scroll");
$(".opacityBottom").remove();
});
css代码
.bigImg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.opacityBottom {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.8);
z-index: 1000;
top: 0;
left: 0;
}