美文网首页
jquery点击图片显示大图

jquery点击图片显示大图

作者: 以贱为书 | 来源:发表于2018-12-27 13:18 被阅读0次
/*前端代码*/
            <li >
                <span >其它证件</span>
                <span class="img-wrap">
                   <img src="__PC__/{$insurerData.otherfile}"  onclick="fullScreen(this)">
               </span>
            </li>

<section class="fullScreen" id="fullScreen" >
    <div class="" onclick="$(this).parent().css('display','none')">
        <img/>
    </div>
</section>
/*CSS代码*/
 /*全屏显示*/
    .fullScreen {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
        transition: all .3s;
    }
    .fullScreen div {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .fullScreen div img {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
/*JS函数*/
//全屏显示
    function fullScreen(t) {
        $('.fullScreen').css('display', 'block').children('div').children('img').attr('src', $(t).attr('src'))
    }

相关文章

网友评论

      本文标题:jquery点击图片显示大图

      本文链接:https://www.haomeiwen.com/subject/adelkqtx.html