简单的点击图片放大

来源：互联网发布：中超数据库编辑：程序博客网时间：2024/05/22 10:33

<style>    .bigPicWrap{        width: 100%;        position: fixed;        top:0;        left:0;        background-color: rgba(0,0,0,0.6);        text-align: center;        display: none;        z-index: 1100;    }    .bigPicBox{        width: 80%;        margin: 0 auto;        text-align: center;    }    .bigPicBox img{        width: 100%;    }</style><body>    <div class="bigPicWrap">        <div class="bigPicBox">            <img src="" style="display: inline-block; vertical-align: middle;">        </div>    </div></body><script type="text/javascript">    $(".bigPicWrap").height($(window).height()+"px");    var _height = $(document.body).height();    console.log(_height);    $(".bigPicBox").css({        "height" : _height+"px",        "line-height" : _height+"px"    });    function bigPic() {        $(".casePicture").on("click",function () {            var _img = $(this).data("img");            $(".bigPicBox").find("img").attr("src",_img);            $(".bigPicWrap").fadeIn();        });        $(".bigPicWrap").on("click",function(){            $(".bigPicWrap").fadeOut();        })    }    bigPic();</script>

阅读全文

0 0