css 代码 ``` /*全屏显示大图*/ .opacityBottom{ width: 100%; height: 100%; position: fixed; background:rgba(0,0,0,0.8); z-index:1000; top: 0; left: 0 } .none-scroll{ overflow: hidden; height: 80%; } .bigImg{ width:80%; height: 80%; left:10%; top:10%; position:fixed; z-index: 10001; } ``` js 代码 ``` $("img").click(function () { var imgsrc = $(this).attr("src"); var opacityBottom = '<div id="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").bind("click",clickToSmallImg); $(".bigImg").bind("click",clickToSmallImg); var imgHeight = $(".bigImg").prop("height"); if(imgHeight < h){ $(".bigImg").css({"top":(h-imgHeight)/2 + 'px'}); }else{ $(".bigImg").css({"top":'0px'}); } function clickToSmallImg() { $("html,body").removeClass("none-scroll"); $("#opacityBottom").remove(); } }; ```