js翻页动画效果代码

翻页动画效果在网页设计中非常常见，它可以提升用户体验，使页面切换更加流畅和吸引人。下面是一个简单的JavaScript翻页动画效果的示例代码，使用了CSS3的过渡效果和JavaScript来控制页面的切换。

基础概念

翻页动画通常涉及以下几个概念：

CSS过渡（Transitions）：用于创建平滑的动画效果。
JavaScript事件处理：用于监听用户的交互行为，如点击按钮。
DOM操作：用于动态修改页面内容和样式。

示例代码

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻页动画示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="page-container">
        <div class="page active" id="page1">页面1</div>
        <div class="page" id="page2">页面2</div>
        <div class="page" id="page3">页面3</div>
    </div>
    <button onclick="prevPage()">上一页</button>
    <button onclick="nextPage()">下一页</button>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.page-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    transition: transform 0.5s ease-in-out;
}

.page.active {
    transform: translateX(0);
}

.page:not(.active) {
    transform: translateX(100%);
}

JavaScript逻辑

// script.js
let currentPage = 1;
const totalPages = 3;

function showPage(pageNumber) {
    const pages = document.querySelectorAll('.page');
    pages.forEach(page => page.classList.remove('active'));
    document.getElementById(`page${pageNumber}`).classList.add('active');
}

function nextPage() {
    if (currentPage < totalPages) {
        currentPage++;
        showPage(currentPage);
    }
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        showPage(currentPage);
    }
}