CSS Positions レイアウトを使用してページング効果を実現する方法

CSS 位置レイアウトを使用してページング効果を実現する方法

Web デザインでは、ページング効果は、コンテンツを複数のページに分割し、ナビゲーションを提供するために使用される一般的なレイアウト方法です。機能。 CSS ポジションは、ページング効果を実現するのに役立つ CSS のレイアウト方法です。この記事では、CSS Positions レイアウトを使用してページング効果を実現する方法と、具体的なコード例を詳しく紹介します。

1. 基本レイアウト

まず、コンテンツ コンテナやナビゲーション コントロールを含む基本的な HTML 構造を作成する必要があります。コードは次のとおりです。

<div class="content">
  <div class="page">第一页内容</div>
  <div class="page">第二页内容</div>
  <div class="page">第三页内容</div>
</div>
<div class="pagination">
  <button class="prev">上一页</button>
  <button class="next">下一页</button>
</div>

上記のコードでは、コンテンツ コンテナが <div class="content"> でラップされ、各ページのコンテンツが でラップされています。 <code>&lt ;div class="page"> を表します。ナビゲーション コントロールは <div class="pagination"> を使用してラップされ、前のページと次のページは <code><button class="prev"></button> を使用してラップされます。 ## それぞれ。 # は、を意味します。 2.CSS レイアウト

次に、CSS Positions レイアウトを使用してページング効果を実現する必要があります。コードは次のとおりです。

.content {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.pagination {
  text-align: center;
  margin-top: 10px;
}

.prev, .next {
  margin: 0 10px;
}

上記のコードでは、コンテンツ コンテナに

position:相対; を設定し、幅と高さを制限しながら、 overflow: hidden ; を渡します。 コンテナサイズを超える部分を非表示にします。

各ページのコンテンツは、

position:Absolute; を使用して配置され、top:0;left:0; によってコンテナの左上隅に配置されます。 。同時に、ページ切り替え効果を実現するために、CSS アニメーションの transition 属性を使用します。

ナビゲーション コントロールは、テキストの中央揃えと上下の間隔スタイル設定を使用します。

JavaScript インタラクション

最後に、JavaScript を使用してページング効果のインタラクティブ ロジックを実装する必要があります。具体的なコードは次のとおりです。

var content = document.querySelector('.content');
var pages = document.querySelectorAll('.page');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var currentPage = 0;

prevBtn.addEventListener('click', function() {
  if (currentPage > 0) {
    currentPage--;
    content.style.transform = 'translateX(' + (currentPage * -100) + '%)';
  }
});

nextBtn.addEventListener('click', function() {
  if (currentPage < pages.length - 1) {
    currentPage++;
    content.style.transform = 'translateX(' + (currentPage * -100) + '%)';
  }
});

上記のコードでは、最初にコンテンツ コンテナ、各ページのコンテンツ、前ページと次ページのボタン、および変数

currentPage を取得します。現在のページ番号を表します。

次に、

addEventListener メソッドを使用して、クリック イベントを前ページと次ページのボタンにバインドし、イベント ハンドラー関数の currentPage の値を更新します。 content.style.transform を設定することで、ページ切り替え効果を実現します。

上記の HTML、CSS、および JavaScript コードを通じて、CSS Positions レイアウトを使用してページング効果を実現することに成功しました。