jquery实现点击相册图片实现放大效果

文章内容

分享一个简单得jquery实现点击相册图片实现放大效果：

html代码

<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="jquery/1.10.2/jquery.min.js"></script>
<div class="w1200">
        <ul class="jqfree">
            <li><a href="javascript:;" data-url="images/1.jpg">
                <div class="pic">
                    <img src="images/1.jpg" /></div>
            </a></li>
            <li><a href="javascript:;" data-url="images/2.jpg">
                <div class="pic">
                    <img src="images/2.jpg" /></div>
            </a></li>
            <li><a href="javascript:;" data-url="images/3.jpg">
                <div class="pic">
                    <img src="images/3.jpg" /></div>
            </a></li>
        </ul>
    </div>
<!--图片弹出层开始-->
<div class="show-pop">
        <div class="show-pop-bg">
        </div>
        <div class="show-popc">
            <div class="close">
            </div>
            <div class="show_pic">
                <img src="" /></div>
        </div>
    </div>
<!--图片弹出层结束-->
<script type="text/javascript">
        $('.jqfree li a').on('click', function () {
            $('.show-pop').show();
            $('.show-pop .show_pic img').attr('src', $(this).attr('data-url'));
        });
        $(".show-pop-bg").click(function () {
            $(".show-pop").hide();
        });
        $(".close").click(function () {
            $(".show-pop").hide();
        });
    </script>

index.css代码

<style>
    *
    {
        margin: 0;
        padding: 0;
    }
    ul, ol
    {
        list-style-type: none;
    }
    a
    {
        text-decoration: none;
    }
    .w1200
    {
        max-width: 1200px;
        margin: 60px auto;
    }
    .jqfree
    {
        width: 100%;
        padding-bottom: 10px;
    }
    .jqfree li
    {
        width: 20%;
        margin: 0 1% 0 0;
        background: #fff;
        float: left;
    }
    .jqfree li .pic
    {
        width: 100%;
        overflow: hidden;
    }
    .jqfree li .pic img
    {
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    .jqfree li a
    {
        display: block;
    }
    
    .show-pop
    {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 9999;
        display: none;
    }
    .show-pop-bg
    {
        background: rgba(0,0,0,.4);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
    .show-popc
    {
        position: absolute;
        left: 50%;
        top: 3%;
        bottom: 3%;
        transform: translate(-50%,0);
        background: #fff;
        padding: 2%;
        box-sizing: border-box;
        max-width: 998px;
        width: 90%;
    }
    .show-popc .close
    {
        position: absolute;
        right: 2.5%;
        top: 25px;
        background: url(../images/close.png) 0 0 no-repeat;
        background-size: 100%;
        width: 19px;
        height: 18px;
        cursor: pointer;
        z-index: 999;
    }
    .show_pic
    {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }
    .show_pic img
    {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }
</style>