html实现平移动画分页效果

横向滑动分页：

css部分

.button-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.nav-button {
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
}

.content-container {
    width: 100vw;
    height: calc(100vh - 60px); /* 减去按钮容器的高度 */
    overflow: hidden;
    position: relative;
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s ease;
}

#page0 {
    background-color: #f0f0f0;
}

#page1 {
    background-color: #d0d0d0;
    transform: translateX(100%);
}

#page2 {
    background-color: #b0b0b0;
    transform: translateX(200%);
}

html部分

<div class="button-container">
    <button class="nav-button" onclick="showPage(0)">首页</button>
    <button class="nav-button" onclick="showPage(1)">第二个</button>
    <button class="nav-button" onclick="showPage(2)">第三个分页</button>
</div>
<div class="content-container">
    <div class="page" id="page0">
        首页
    </div>
    <div class="page" id="page1">
        第二页
    </div>
    <div class="page" id="page2">
        第三分页
    </div>
</div>

js部分

    function initWwitchPage() {
        let currentPage = 0;
        return (pageIndex) => {
            const pages = document.querySelectorAll('.page');
            pages.forEach((page, index) => {
                page.style.transform = `translateX(${(index - pageIndex) * 100}%)`;
            });
            currentPage = pageIndex;
            console.log(currentPage, pageIndex);
        }
    }
    const showPage = initWwitchPage();

测试静态概览：（并没有做美化，只是横向分页，点击右边按钮页面往左漂移后显示分页，点击右边则相反）

×

*转载请注明出处：原文链接：https://cpp.vin/page/128.html