点击图片全屏展示插件

最新推荐文章于 2024-08-16 08:24:00 发布

Polaris_tl

最新推荐文章于 2024-08-16 08:24:00 发布

阅读量354

点赞数

分类专栏：移动端插件文章标签：图片展示小插件点击图片全屏展示

本文链接：https://blog.csdn.net/Polaris_tl/article/details/103351382

版权

插件同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

效果图

加入代码后点击任意一张图片，即可以全屏方式展示该图片
使用
- 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;
}