Question

基本上，我想了解垂直滚动，但重叠图像对惊人Beolit 15的效果如何。

我到目前为止发现的是，他们使用了一个容器div，它同样包含四个div个绝对位于容器左上角的div个。到现在为止还挺好。除此之外，四个cover都具有相同的大小，背景图像的大小为z-index，并且具有不同的clip值，以确保它们位于正确的订单彼此重叠。

然后，他们添加的是div样式，它总是从四个673px中每一个的左上角开始，总是具有相同的宽度，但它们的垂直长度不同。最顶端是最短的，第二个是最短的，等等......

到目前为止，我已经有两个问题了：

他们如何获得window.scroll宽度？取决于屏幕分辨率，这不是吗？为什么这正是这个值？
他们是如何获得剪裁矩形的教学高度的？为什么这些价值呢？（当然，因为否则它不会起作用，但他们是如何得到这些价值的？我确定不会通过反复试验......）

现在，除此之外，您可以看到滚动时，基本上他们所做的只是更新剪裁矩形的下边框。这样看起来好像它们向上滑动，并在图像上方移动，同时它们保持固定。

我不知道他们是如何做到这一点的。显然他们已经以某种方式附加到static List<string> asciis = new List<string> { "shrug", "omg" }; static List<string> converteds = new List<string> { @"¯\_(ツ)_/¯", @"◕_◕"}; private static void Game_OnInput(GameInputEventArgs args) { newtext = args.Input; foreach (var ascii in asciis) { foreach (var converted in converteds) { if (args.Input.Contains(ascii)) { newtext = args.Input.Replace(ascii, converted); Game.Say(newtext); } } } }事件，但究竟是怎么回事？

Answer 1

一旦到达视口的上边缘，他们会通过.fixed将div.images类添加到e.startEngine()，并在滚动浏览所有图片时通过e.stopEngine()将其删除。这会触发以下样式：

.focus .images.fixed {
    position: fixed;
    width: calc(50% - 30px);
}

calc(50% - 30px)可能是您要搜索的673px。

每张图片的样式如下：

height: 928px;
clip: rect(0px 597px 1856px 0px);

可以扩展为：

height: [window.innerHeight];
clip: rect(
    0px
    [window.innerWidth / 2 - 30]
    [
        this.parentNode.parentNode.offsetTop +
        document.querySelector('.inpagenav').offsetHeight +
        (window.innerHeight * IMAGENUMBER) - 
        window.scrollY
    ]
    0px
);

滚动事件通过e.Tools.bindEvent(window, "scroll", w)附加，功能w调用e.Tools.clipY()，为每张图片设置clip样式。

滚动时移动重叠滑动垂直图像

1 个答案: