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; }