[分享]css3手指滑动切换页面

CSS3手指滑动切换页面是一种现代化的网页设计技术，它为用户提供了更加流畅和自然的浏览体验。它通过简单的CSS属性和JavaScript代码实现页面内容的平滑过渡和切换，让页面变得更加吸引人。/CSS...

CSS3手指滑动切换页面是一种现代化的网页设计技术，它为用户提供了更加流畅和自然的浏览体验。它通过简单的CSS属性和JavaScript代码实现页面内容的平滑过渡和切换，让页面变得更加吸引人。

/*CSS代码*/

/*设置页面容器为绝对定位*/
.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*设置页面的进入和离开动画*/
.page {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*设置每个页面的位置*/
.page1 {
  background-color: #F1C40F;
}
.page2 {
  background-color: #3498DB;
}
.page3 {
  background-color: #2ECC71;
}

/*JavaScript代码*/

/*定义手指滑动事件*/
var startX, endX;
document.addEventListener('touchstart', function(event) {
  startX = event.touches[0].pageX;
});
document.addEventListener('touchend', function(event) {
  endX = event.changedTouches[0].pageX;
  if (startX - endX > 50) {
    nextPage(); /*滑动到下一页*/
  }
  if (startX - endX < -50) {
    prevPage(); /*滑动到上一页*/
  }
});

/*定义页面切换函数*/
var currentPage = 1; /*当前显示的页面*/
var totalPage = 3; /*页面总数*/
function nextPage() {
  if (currentPage < totalPage) {
    currentPage++;
    document.querySelector('.page' + currentPage).style.transform = 'translateX(0%)'; /*显示下一页*/
  }
}
function prevPage() {
  if (currentPage > 1) {
    document.querySelector('.page' + currentPage).style.transform = 'translateX(100%)'; /*隐藏当前页*/
    currentPage--;
  }
} 

通过上述代码，可以实现手指滑动切换页面的效果。用户只需在网页上左右滑动手指即可实现页面的切换，这种交互方式十分方便和自然。同时，使用CSS3的过渡效果可以让页面的切换更加平滑和优美。