卡卡网

在本文中，将介绍如何在网页间过渡时，采用“滑动式”翻页。请看下图所示：

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”。

标签: 翻页  滑动