图片点击库上的简单jquery答案

【问题标题】：simple jquery on image click gallery图片点击库上的简单jquery
【发布时间】：2019-02-06 18:12:50
【问题描述】：

我有一个简单的画廊，当我单击图像（大小在 img 标签中定义）时，它应该在屏幕中心打开它并将其调整为原始尺寸或其他定义的尺寸。现在它只是使图像居中。谢谢！

    <style>
#img-cover {
    position: absolute;
    display:none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.6;
    z-index:9998;
}
#img-container {
    position:fixed;
    display:none;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    z-index:9999;
}
</style>

    <script>
            $('.img').on('click', function (e) {
    $('#img-cover').fadeIn();
    var img = $(this);
    $('#img-container').html(img.clone())
        .css({
        'margin-top': '-' + img.height() / 2 + 'px',
            'margin-left': '-' + img.width() / 2 + 'px'
    }).fadeIn();
});

$('#img-cover').on('click', function () {
    $('#img-cover').fadeOut();
    $('#img-container').fadeOut();
});
            </script>

【问题讨论】：

标签： jquery image gallery

【解决方案1】：

使用 .clone() 有副作用。它产生具有重复 id 属性的元素。 id 属性应该是唯一的。假设您想向用户展示图库中的图像。网页将显示小尺寸图像。当用户点击图像时，页面将显示原始大小的图像。 Demo2 就是这样做的。尽情享受吧！

//
<!DOCTYPE html>
<!--
index.html
-->
<html>
<head>
    <title>Image Gallery</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        #img-cover {
            position: absolute;
            display: none;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;
            z-index: 9998;
        }
        #img-container {
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -100px;
            z-index: 9999;
        }
        #frame {
            position: absolute;
            display: none;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: gold;
            opacity: 0.6;
            z-index: 9997;
        }
    </style>
    <script src="pathto/jquery/jquery-1.8.0.js"></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            $('.img4').on('click', function (e) {
               $('#frame').fadeIn('slow');
               $('#img-cover').fadeOut('slow');
               $('#img-container').fadeOut('slow');
            });
           $('img').on('click', function (e) {
               $('#img-cover').fadeIn();
               var img = $(this);
               $('#img-container').html(img.clone())
                   .css({
                   'margin-top': '-' + img.height()/2 + 'px',
                   'margin-left': '-' + img.width()/2 + 'px'
                }).fadeIn();
            });
            $('#img-cover').on('click', function (){
                $('#img-cover').fadeOut();
                $('#img-container').fadeOut();
            });
            $('#btnReset').on('click', function (){
                $('#frame').fadeOut();
            });
        });

    </script>
</head>
<body>
    <div class="img2">
        <h1>Image Gallery2.</h1>
    </div>
    <div class="img3">
        Demo1
        <img src="pathto/images/myimage.jpg" height="110" width="110" alt="MyImage" />
    </div>
    <div id="img-container">
        Image container.
    </div>
    <div id="img-cover">
        Image cover.
    </div>
    <hr>
    <div class="img4">
        Demo2
        <img src="pathto/images/myimage.jpg" height="110" width="110" alt="MyImage" />
    </div>
    <hr>
    <div id="frame">
        Demo3
        <img src="pathto/images/myimage.jpg" alt="MyImage" />
        <hr>
        <input type="button" id="btnReset" value="Reset" />
    </div>
</body>
</html>
//

【讨论】：