首页 > 代码库 > jquery,css3实现多张图片模态框

jquery,css3实现多张图片模态框

2024-09-21 16:41:38   216人阅读

 

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>单张图片模态框</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/jquery-3.2.0.min.js"></script>
</head>

<body>


<div class="tuijianmenu-menu">

    <div class="tuijianmenu-item">
        <img src="images/01.jpg"  alt="model test picture1"  class="arealimg">
        <!-- 图片模态框 -->
        <div class="motai" id="mo">
            <span class="close" id="close">×</span>
            <img class="amotaiimg" src="motaiimg" id="moimg">
            <div class="acaption" id="caption"></div>
        </div>
    </div>

    <div class="tuijianmenu-item">
        <img src="images/02.jpg" alt="model test picture2" class="arealimg">

    </div>

    <div class="tuijianmenu-item">
        <img src="images/03.jpg"  alt="model test picture3"  class="arealimg">

    </div>

    <div class="tuijianmenu-item">
        <img src="images/04.jpg" alt="model test picture4"  class="arealimg">

    </div>
</div>


</body>
</html>

 

js代码：

<script type="text/javascript">
        $(document).ready(function(){

            $(‘.tuijianmenu-item‘).click(function(e){

                var imgsrc=http://www.mamicode.com/$(this).children("img.arealimg").attr(‘src‘);
                var imgalt=$(this).children("img.arealimg").attr(‘alt‘);

                var currentDivId = $(" .motai").attr(‘id‘);
                var currentCloseId=$(" .motai .close").attr("id");
                var currentMoImgId=$(" .motai img").attr(‘id‘);
                var currentCaptionId=$(" .motai div").attr(‘id‘);

                var motai=document.getElementById(currentDivId);
                var moimg=document.getElementById(currentMoImgId);
                var caption=document.getElementById(currentCaptionId);

                motai.style.display="block";

                moimg.src=imgsrc;
                caption.innerHTML=imgalt;

                var close=document.getElementById(currentCloseId);
                $(‘.motai .close‘).mousedown(function () {
                    motai.style.display="none";
                });
            });
        });
</script>

 

css代码：

 

    /*推荐菜单*/
        .tuijianmenu-menu{
            width:100%;
            height:210px;
            margin:20px auto;
        }
        .tuijianmenu-item{
            width:23%;
            margin:0 10px;
            float:left;
            height:200px;
            cursor:pointer;
        }
        .arealimg{
            margin:0;
            width:100%;
            height:100%;
            border-radius:6px;
        }
        .arealimg:hover{
            opacity:0.6;
        }
        .motai{
            display:none;
            width:100%;
            height:100%;
            position:fixed;
            overflow:auto;
            background-color:rgba(0,0,0,0.7);
            top:0;
            left:0;
            z-index:600;
        }
        .amotaiimg{
            display:block;
            margin:25px auto;
            width:50%;
            max-width:750px;
        }
        .acaption{
            text-align:center;
            margin:15px auto;
            width:60%;
            max-height:750px;
            font-size:20px;
            color:#ccc;
        }
        .amotaiimg,.acaption{
            -webkit-animation:first 1s;
            -o-animation:first 1s;
            animation:first 1s;
        }
        @keyframes first{
            from{transform:scale(0.1);}
            to{transform:scale(1);}
        }
        .close{
            font-size:40px;
            font-weight:bold;
            position:absolute;
            top:20px;
            right:14%;
            color:#f1f1f1;
        }
        .close:hover,.close:focus{
            color:#bbb;
            cursor:pointer;
        }
        @media only screen and(max-width:750px){
            #moimg{
                width:100%;
            }
        }

        /*/推荐菜单*/

 

综上所述，就会有个漂亮的图片展示代码啦

技术分享

 点击：

技术分享

 

jquery,css3实现多张图片模态框


联系
我们