js+html5实现侧滑页面效果

要实现侧滑页面效果，你可以使用JavaScript和HTML5的一些特性。以下是一种常见的实现方式：

1. 首先，在HTML中创建一个容器元素，用来包含需要侧滑的页面内容，例如：

<div id="container">
  <div id="page1">页面1的内容</div>
  <div id="page2">页面2的内容</div>
</div>

2. 接下来，在CSS中设置容器的样式，使其具有固定宽度和高度，并启用溢出隐藏，例如：

#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

3. 在JavaScript中，你可以监听触摸或鼠标事件来实现侧滑效果。下面是一个使用触摸事件的示例：

var container = document.getElementById('container');
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');

var startX, startY;

container.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

container.addEventListener('touchmove', function(e) {
  var currentX = e.touches[0].clientX;
  var currentY = e.touches[0].clientY;
  var diffX = startX - currentX;
  var diffY = startY - currentY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    e.preventDefault(); // 阻止页面滚动

    if (diffX > 0) {
      // 向左滑动
      page1.style.transform = 'translateX(' + (-diffX) + 'px)';
      page2.style.transform = 'translateX(' + (window.innerWidth - diffX) + 'px)';
    } else {
      // 向右滑动
      page1.style.transform = 'translateX(' + (-diffX) + 'px)';
      page2.style.transform = 'translateX(' + (-window.innerWidth - diffX) + 'px)';
    }
  }
});

container.addEventListener('touchend', function() {
  page1.style.transform = '';
  page2.style.transform = '';
});

这是一个简单的示例，可以让页面1和页面2在水平方向上进行侧滑。你可以根据自己的需求进行样式和交互的定制。记得在实际项目中做一些额外的处理，例如处理边界情况和动画效果。