jquery点击图片放大功能

jquery点击图片放大功能

js代码

$('#enlarge').click(function () {//获取图片路径var imgsrc = $("#enlarge").attr("src");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();});}

enlarge是原图片的id

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: 9999;top: 0;left: 0;}