效果图
- 加入代码后点击任意一张图片,即可以全屏方式展示该图片
- 使用
- DOM结构顶部下入以下代码,然后在包裹图片的容器上设置
id
为picBox
//插入代码
<div class="blackLayer">
<div>
<img src="" alt="">
</div>
</div>
//给图片盒子设置id为picBox
<div id="picBox">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
window.onload = function () {
var blackLayer = $('.blackLayer')
$('#picBox').click(function(e){
var img = e.target
var src = $(img).attr("src")
if (src){
$(blackLayer).css({"left":"0","opacity":1,"transform":"scale(1)"})
$($(blackLayer).find('img')[0]).attr("src",src)
}
})
$(blackLayer).click(function(e){
$(this).css({"left":"150%","opacity":0,"transform":"scale(0)"})
})
//只有点击图片以外的区域才隐藏
// $($(blackLayer).find('img')[0]).click(
// function(e){
// e.stopPropagation()
// }
// )
}
.blackLayer {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.27);
z-index: 10;
transition: all 300ms;
opacity: 0;
transform: scale(0);
left: 100%;
}
.blackLayer img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 97%;
margin: auto;
border-radius: 0.1rem;
overflow: hidden;
box-shadow: 0 0 0rem #3e3c3c;
border: 0.06rem solid #fff;
transition: all 300ms;
}