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%; /*图片向左移动自身宽度的50%, 向上移动自身高度的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; }