html点击图片在原页面放大显示,html 点击img标签弹出层放大,再点击恢复

48de49b31f7a

点击前状态

48de49b31f7a

点击后效果

html代码:

swmain.png

css:

.img-select img {

width: 500px;

height: 300px;

}

.dialog-bg {

display: none;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: rgba(0,0,0,0.4);

}

.dialog-bg .img-box {

width: 1165px;

height: 650px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -582px;

margin-top: -340px;

}

.dialog-bg .img-box img {

width: 100%;

height: 100%;

}

js:

//无论点击哪一个img弹出层都会展示相应的图片。

$(".img-select").find("img").on("click", function () {

$(this).each(function () {

var $this = $(this);

var $img = $this.attr("src");//获取当前点击img的src的值

$("#img-box").find("img").attr("src", $img);//将获取的当前点击img的src赋值到弹出层的图片的src

$("#dialog-bg").show();//弹出层显示

});

});

//弹出层隐藏

$("#dialog-bg").on("click", function () {

$(this).hide();//

});