jQuery实现图片的放大以及点击图片，放大图片出现在弹出层。

 

又学习了一个小demo，并运用到了后台的管理系统中。 
直接上代码吧

<div class="img-list-box">
    <div class="img-select">
        <img id="img" class="min" src="./img/banner.jpg" alt="">
    </div>
    <div class="img-select">
        <img class="min" src="./img/bg_repeat.jpg" alt="">
    </div>
</div>

<div class="dialog-bg" id="dialog-bg">
<div class="img-box" id="img-box">
    <img src="">
</div>

.max{
   width: 300px;
}
.min{
    width: 100px;
}

.img-select img{
    width:200px;
    height:100px;
}

.dialog-bg{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.4);
}


.dialog-bg .img-box{
    width: 400px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -125px;
}

.dialog-bg .img-box img{
    width: 100%;
    height: 100%;
}

下面这段代码是控制图片在点击的时候实现 大小切换

<script src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>
<script type="text/javascript">
    $("#img").click(function () {
        $(this).toggleClass("max");
        $(this).toggleClass("min");
    });//这里我们运用的是jQuery提供的toggleClass()在两个类名之间切换。
</script>

下面这段代码是实现，小图点击出现弹出层，图片放大在弹出层中间。

<script src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>
<script type="text/javascript">
    //无论点击哪一个img弹出层都会展示相应的图片。
    $(".img-select").find("img").on("click",function () {
        $(this).each(function () {
            var $this = $(this);
            var $img = $this.attr("src");//获取当前点击img的src的值
            $("#img-box").find("img").attr("src",$img);//将获取的当前点击img的src赋值到弹出层的图片的src
            $("#dialog-bg").show();//弹出层显示
        });
    });

    //弹出层隐藏
    $("#dialog-bg").on("click",function () {
        $(this).hide();//
    });
</script>