js实现翻书
实现翻书效果的基本思路
翻书效果可以通过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})`;
};使用现成库方案
如果需要更完整的功能，可以考虑使用专门的开源库：
- Turn.js：提供完整的书本翻页效果
- PageFlip.js：轻量级的翻页库
- Folio.js：专注于电子书阅读体验
这些库提供了更多自定义选项和更好的跨浏览器兼容性，适合生产环境使用。
