Question

新手在这里。我正在尝试做的事情，就像一个全幅高度滑块。有4张幻灯片。幻灯片2在幻灯片1的后面。幻灯片3在幻灯片2的后面。幻灯片4在幻灯片3的后面。在滚动时，幻灯片1在圆圈内缩放，而缩放后的幻灯片2在后面可见。

与其他人相同（1-4）。

unction _cgo_52d112b951a8_Cfunc_rd_kafka_AdminOptions_destroy: error: undefined reference to 'rd_kafka_AdminOptions_destroy'
bazel-out/k8-fastbuild/bin/external/com_github_confluentinc_confluent_kafka_go/kafka/_objs/go_default_library%linux_amd64%cgo_c_lib/adminapi.cgo2.pic.o:adminapi.cgo2.c:function _cgo_52d112b951a8_Cfunc_rd_kafka_AlterConfigs: error: undefined reference to 'rd_kafka_AlterConfigs'
bazel-out/k8-fastbuild/bin/external/com_github_confluentinc_confluent_kafka_go/kafka/_objs/go_default_library%linux_amd64%cgo_c_lib/adminapi.cgo2.pic.o:adminapi.cgo2.c:function _cgo_52d112b951a8_Cfunc_rd_kafka_AlterConfigs_result_resources: error: undefined reference to 'rd_kafka_AlterConfigs_result_resources'
bazel-out/k8-fastbuild/bin/external/com_github_confluentinc_confluent_kafka_go/kafka/_objs/go_default_library%linux_amd64%cgo_c_lib/adminapi.cgo2.pic.o:adminapi.cgo2.c:function _cgo_52d112b951a8_Cfunc_rd_kafka_ConfigEntry_is_read_only: error: undefined reference to 'rd_kafka_ConfigEntry_is_read_only'
bazel-out/k8-fastbuild/bin/external/com_github_confluentinc_confluent_kafka_go/kafka/_objs/go_default_library%linux_amd64%cgo_c_lib/adminapi.cgo2.pic.o:adminapi.cgo2.c:function _cgo_52d112b951a8_Cfunc_rd_kafka_ConfigEntry_is_sensitive: error: undefined reference to 'rd_kafka_ConfigEntry_is_sensitive'
bazel-out/k8-fastbuild/bin/external/com_github_confluentinc_confluent_kafka_go/kafka/_objs/go_default_library%linux_amd64%cgo_c_lib/adminapi.cgo2.pic.o:adminapi.cgo2.c:function _cgo_52d112b951a8_Cfunc_rd_kafka_ConfigEntry_is_synonym: error: undefined reference to 'rd_kafka_ConfigEntry_is_synonym'
bazel-out/k8-

window.addEventListener( 'load', function() {
    var box = document.getElementById('hs-box-first'),
        docHeight = document.documentElement.offsetHeight;
          
    window.addEventListener( 'scroll', function() {
        // normalize scroll position as percentage
        var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
            transformValue = 'scale('+(1-scrolled)+')';

        box.style.WebkitTransform = transformValue;
        box.style.MozTransform = transformValue;
        box.style.OTransform = transformValue;
        box.style.transform = transformValue;

    }, false);
          
}, false);

#container-home {
    width: 100%;
    height: 100vh; 
    position: fixed;
    left: 0%;
    top: 0%;
}

#hs-box-first {
    width: 120%;
    height: 120vh;
    background: red;
    border: 1px solid red;
    border-radius: 50%;
    top: -70%;
    transform: translateY(70%);
    position: fixed;
    padding: 60% 0;
    left: -10%;
    right: -10%;
    z-index: 4;
}	
#hs-box-second {
    width: 120%;
    height: 120vh;
    background: blue;
    border: 1px solid blue;
    border-radius: 50%;
    top: -70%;
    transform: translateY(70%);
    position: fixed;
    padding: 60% 0;
    left: -10%;
    right: -10%;
    z-index: 4;
}

我的想法是第一张幻灯片的<div id="container-home"> <div id="hs-box-first"></div> <div id="hs-box-second"></div> <div id="hs-box-third"></div> <div id="hs-box-fourth"></div> </div>最大，幻灯片2的幻灯片少，等等。因此可以正确显示它们。问题是，在滚动时，我面临着一个问题，当我为幻灯片2添加一个额外的z-index时，幻灯片2也会被滚动，并且我不知道如何仅在幻灯片1被滑动时才能使其滑动缩放至零，因此只有幻灯片2才能滚动/缩放。代码适用于第一个代码，但是我不知道如何将其余的代码付诸实践。任何帮助。

如何做多个div内部收缩，一个一个地滚动

0 个答案: