在本文中，將介紹如何在網頁間過渡時，采用“滑動式”翻頁。請看下圖所示：

demodownload

demodownload

在本實例中，有左右和上下兩種滑動方式，頁面之間的滑動基本上是使整個窗口的寬度和高度從左到右和從右到左滑動，從下到上和從上到下滑動，有點像圖像輪播。然而，與圖像輪播不同的是，頁面可以包含我們想要的任何內容，例如按鈕、文本、圖像、輸入字段等。

對于本實例，我們將創建四個頁面，但可以隨意添加或刪除頁面。

HTML

我們使用以下類名創建類似于 div 的層次結構：容器、頁面和頁面。以這種方式設置允許我們將容器的寬度和高度自定義為整個屏幕大小或其他內容（稍后會詳細介紹）。pages 類將簡單地保存每個單獨的頁面。這是基本概念：

<div class="container"> 
  <div class="pages"> 
    <div class="page one"> 
      <h1>PAGE 1</h1> 
      <div> 
        <button onClick="slide('next')">下一頁</button> 
      </div> 
    <div> 
    <div class="page two"> 
      <h1>PAGE 2</h1> 
      <div> 
        <button onClick="slide('prev')">上一頁</button > 
        <button onClick="slide('next')">下一頁</button> 
      </div> 
    </div> 
    <div class="page three"> 
      <h1>PAGE 3</h1>
      <div> 
        <button onClick="slide('prev')">上一頁</button> 
        <button onClick="slide('next')">下一頁</button> 
      </div> 
     </div>
     <div class="page 4"> 
       <h1>PAGE 4</h1> 
       <div> 
         <button onClick="slide('prev')">Previous</button> 
       </div> 
    </div>     
  </div > 
</div>

如果要添加頁面，只需復制/粘貼其中一個類名為“page x”的 div，并將 x 替換為正確的頁碼。

CSS

*{
margin: 0;
padding: 0;
  font-family: 'Montserrat', sans-serif;
}

button{
  padding: 8px;
  width: 100px;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s ease-out;
}

button:hover{
  transform: scale(1.05);
}

.container{
width: 100%;
height: 100vh;
overflow: hidden;
}

.pages {
  display: flex;
width: 400%;
box-sizing: border-box; 
}

.page {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
gap: 10px;
  transition: all 0.7s;
  color: white;
}

.one{
  background: orangered;
}

.two{
  background-color: dodgerblue;
}

.three{
  background-color: indigo;
}

.four{
  background-color: limegreen;
}

需要注意的是，每一頁的寬度都是 100%。因為我們有四個頁面，所以我們將 .pages 選擇器寬度設置為 400%。因此，對于你添加或刪除的每個頁面，將其增加或減少 100。例如，如果你有四頁并決定添加一頁，則將寬度更改為 500%，如果你刪除一頁，則將其降低到 300%。

JavaScript

現在我們創建滑動到上一頁或下一頁的函數。這是 JavaScript 代碼：

const pages = document.querySelectorAll(".page");
const translateAmount = 100;
let translate = 0;

slide = direction => {

  direction === "next" ? translate -= translateAmount : translate += translateAmount;

  pages.forEach(
  pages => pages.style.transform = `translateX(${translate}%)`);

};

使滑動效果起作用的技巧在于 transform 的 CSS 屬性：translateX(translate)。請記住，我們的 .pages 選擇器的寬度為 400%。第 1 頁在 0% 和 100% 之間，所以為了滑到第 2 頁，也就是 100% 和 200% 之間，我們所要做的就是將 translateX 增加 100。如果我們想向后滑動一頁，那么我們減少 100。

如果我們想從上到下和從下到上滑動怎么辦？在 CSS 文件中，從“.pages”選擇器中刪除“display: flex”和“width:400%”。還要在 JavaScript 文件中將“translateX”切換為“translateY”。

標簽: 翻頁  滑動