卡卡網(wǎng)

在本文中，將介紹如何在網(wǎng)頁(yè)間過渡時(shí)，采用“滑動(dòng)式”翻頁(yè)。請(qǐng)看下圖所示：

demodownload

demodownload

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

對(duì)于本實(shí)例，我們將創(chuàng)建四個(gè)頁(yè)面，但可以隨意添加或刪除頁(yè)面。

HTML

我們使用以下類名創(chuàng)建類似于 div 的層次結(jié)構(gòu)：容器、頁(yè)面和頁(yè)面。以這種方式設(shè)置允許我們將容器的寬度和高度自定義為整個(gè)屏幕大小或其他內(nèi)容（稍后會(huì)詳細(xì)介紹）。pages 類將簡(jiǎn)單地保存每個(gè)單獨(dú)的頁(yè)面。這是基本概念：

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

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

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;
}

需要注意的是，每一頁(yè)的寬度都是 100%。因?yàn)槲覀冇兴膫€(gè)頁(yè)面，所以我們將 .pages 選擇器寬度設(shè)置為 400%。因此，對(duì)于你添加或刪除的每個(gè)頁(yè)面，將其增加或減少 100。例如，如果你有四頁(yè)并決定添加一頁(yè)，則將寬度更改為 500%，如果你刪除一頁(yè)，則將其降低到 300%。

JavaScript

現(xiàn)在我們創(chuàng)建滑動(dòng)到上一頁(yè)或下一頁(yè)的函數(shù)。這是 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}%)`);

};

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

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

標(biāo)簽: 翻頁(yè)  滑動(dòng)