javascript - 单击不触发位置绝对图像

Question

我正在通过制作交互式日落来练习使用 .animate 和其他视觉技巧。除了山之外，我的所有图像都是绝对定位的。我试图让点击太阳触发日落。相反，日落加载动画会运行，但单击不会产生任何操作。我还尝试在太阳周围制作一个 div，然后单击它。我在 overstack 上找不到解决方案。

我已经加载了 jquery 和 bootstrap。

HTML

<div id="everything">
    <img id="sunset" src="sunset1.jpg" class="img-responsive" alt="Responsive image">
    <img id="sun" src="sun1.png" class="img-responsive" alt="Responsive image">
    <img id="mountains" src="mountains.png" class="img-responsive" alt="Responsive image">
    <img id="space" src="space5compressed.jpg" alt="">
</div>

CSS

body {
    display: none;
}
html, body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden; 
    background-color: black;
}
#sun {
    position: absolute;
    bottom: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 30%;
    width: auto;
    z-index: -1;
    display: none;
}
#sunset {
    position: absolute;
    bottom: 0px;
    z-index: -2;
    min-height: 100%;
}
#mountains {
    position: relative;
    bottom: -100%;
}
#space {
    position: absolute;
    left: -80%;
    bottom: -70%;
    min-height: 250%;
    min-width: 250%;
    max-height: 250%;
    max-width: 250%;
    z-index: -1;
    opacity: 0.0;
    /* Spinning space effect*/
    -webkit-animation:spin 80s linear infinite;
    -moz-animation:spin 80s linear infinite;
    animation:spin 80s linear infinite;
}

    /* More spinning space effect*/
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#everything {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: black;
}

Javascript

$(document).ready(function() {

$("body").fadeIn(8000);

$("#sun").fadeIn(8000);

$( "#mountains" ).delay( 2000 ).animate({
    marginTop: "-25%",
}, 6000 );

$("#sun").on("click", function(){

    $( "#sun" ).animate({
        marginBottom: "-300px",
    }, 8000, "linear" );

    $( "#sunset, #sun" ).delay( 10000 ).animate({
        opacity: 0.0,
    }, 5000 );

    $( "#space" ).delay( 14000 ).animate({
        opacity: 4.0,
    }, 20000 );

});

});

JSFiddle

http://jsfiddle.net/0wwapsLw/3/

Answer 1

您需要将#sun 的 z-index 设置为 999，因为其他元素位于与它重叠的相同位置(因为它是绝对定位的)

所以你的类应该是这样的:

#sun {
    position: absolute;
    bottom: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 30%;
    width: auto;
    z-index: 999;
    display: none;
}

JS代码:

$(document).on('click', '#sun',function(){
    $('#sun').css('z-index',-1);
    $( "#sun" ).animate({
        marginBottom: "-300px",
    }, 8000, "linear" );

    $( "#sunset, #sun" ).delay( 10000 ).animate({
        opacity: 0.0,
    }, 5000 );

    $( "#space" ).delay( 14000 ).animate({
        opacity: 4.0,
    }, 20000 );

});

Working Fiddle