Question

基本上我需要在固定Div内显示#ImageContainer内的所有图像。一切正常，只有当我点击其中一张图像时#ImageContainer消失了。就像图像从#ImageContainer移动到#BigImage一样。无法找到此问题的可能原因，我在Jquery代码中看不到它是正常的。另外，如果您能为此提供更好的解决方案，请随时在评论中解释。

HTML：

<body>
    <div id="ImageCotainer">
        <div id="headerLogo">
            <div id="Logo">

            </div>
        </div>
        <img src="images/hotel/1.jpg" alt="">
        <img src="images/hotel/2.jpg" alt="">
        <img src="images/hotel/3.jpg" alt="">
        <img src="images/hotel/4.jpg" alt="">
        <img src="images/hotel/5.jpg" alt="">
        <img src="images/hotel/6.jpg" alt="">
        <img src="images/hotel/7.jpg" alt="">
    </div>

    <div id="BigImage">
        <img src="images/wedding/4.jpg" alt=""> 
    </div>
</body>

CSS：

#BigImage{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 700px;
    width: 1000px;
    margin: auto;
    background-color: rgba(0,0,0,0.95);
    z-index: 50;    
    display: none;
}
#BigImage img{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 500px;
    width: 800px;
    margin: auto;
}

使用Javascript：

$(window).load(function() { 
    $("#Logo").click(function () {
        window.location.href = "hotelM.html"
    });

    $("img").click(function () {
        //var img = $(this);
        $("#BigImage").html(this);
        $("#BigImage").fadeIn(1000);

    });

    $("#BigImage").click(function () {
        $("#BigImage").fadeOut(1000);
    });
});

Demo

Answer 1

$("#BigImage").html($(this).clone());

<强> Demo

这通常是通过改变图像源而不是折腾整个元素来完成的。

Answer 2

就像图像从#ImageContainer移动到#BigImage
一样

这正是正在发生的事情，这是＆＃39;这个＆＃39;是实际的dom引用，所以当你把它放在其他元素html中时，就会移动它。

你想要做的是改变

$("#BigImage").html(this);

到

$("#BigImage").html($(this).clone());

在div内部点击显示图像，该点击也是fadedIn

2 个答案: