当前位置：首页 > JavaScript

js实现翻书

2026-04-06 17:01:08JavaScript

实现翻书效果的基本思路

翻书效果可以通过CSS 3D变换和JavaScript事件监听来实现。核心是利用transform属性模拟书页翻转的立体感，结合鼠标或触摸事件控制翻页动画。

HTML结构

创建书本的基本结构，包含书页容器和单页元素：

<div class="book">
  <div class="page" id="page1">第一页内容</div>
  <div class="page" id="page2">第二页内容</div>
  <!-- 更多页... -->
</div>

CSS样式设置

为书本和页面添加3D变换样式：

.book {
  perspective: 1500px;
  width: 400px;
  height: 600px;
  position: relative;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transform-origin: left center;
  transition: transform 1s ease;
}

JavaScript实现翻页

监听鼠标事件并控制页面旋转：

const pages = document.querySelectorAll('.page');
let currentPage = 0;

pages.forEach((page, index) => {
  if(index !== 0) {
    page.style.transform = 'rotateY(180deg)';
  }
});

document.addEventListener('click', () => {
  if(currentPage < pages.length - 1) {
    pages[currentPage].style.transform = 'rotateY(-180deg)';
    pages[currentPage + 1].style.transform = 'rotateY(0deg)';
    currentPage++;
  }
});

添加触摸支持

为移动设备添加触摸事件处理：

let startX = 0;
let endX = 0;

document.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

document.addEventListener('touchend', (e) => {
  endX = e.changedTouches[0].clientX;
  handleSwipe();
});

function handleSwipe() {
  if(startX - endX > 50) {
    // 向左滑动，翻到下一页
    if(currentPage < pages.length - 1) {
      pages[currentPage].style.transform = 'rotateY(-180deg)';
      pages[currentPage + 1].style.transform = 'rotateY(0deg)';
      currentPage++;
    }
  } else if(endX - startX > 50) {
    // 向右滑动，翻到上一页
    if(currentPage > 0) {
      pages[currentPage].style.transform = 'rotateY(180deg)';
      pages[currentPage - 1].style.transform = 'rotateY(0deg)';
      currentPage--;
    }
  }
}

进阶优化

实现更真实的翻书效果可以添加以下改进：

// 添加页面折叠效果
pages.forEach(page => {
  page.addEventListener('transitionend', () => {
    page.style.zIndex = page.style.transform.includes('0deg') ? '1' : '0';
  });
});

// 添加阴影渐变
const updateShadow = (progress) => {
  const shadowOpacity = Math.min(0.3 * (1 - progress), 0.2);
  const shadowBlur = Math.max(10 * progress, 5);
  return `0 0 ${shadowBlur}px rgba(0,0,0,${shadowOpacity})`;
};