turn.js 强制竖屏 并且垂直翻页
时间: 2024-09-18 12:17:56 浏览: 53
turn.js实现书本翻页效果插件
`turn.js` 是一个用于创建交互式图书、文档和册页翻转效果的 JavaScript 库。如果你想在使用它时强制页面进入竖屏模式并且实现垂直方向的逐页翻动,你可以通过以下步骤来实现:
1. **初始化时设置页面布局**:
在加载 `turn.js` 或者初始化 viewer 时,设置初始的设备方向为 portrait(竖屏)模式。例如,在 HTML 文件中添加自适应屏幕方向的 CSS 规则:
```html
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1, orientation='portrait'">
```
2. **处理设备方向变化**:
使用现代浏览器的 `orientationchange` 事件监听器,当设备方向改变时,手动调整 viewport 和 viewer 的样式保持竖屏状态:
```javascript
window.addEventListener('orientationchange', function() {
if (window.orientation === 180 || window.orientation === -90 || window.orientation === 90) {
// 竖屏模式下操作
document.body.classList.add('vertical-scroll');
// 需要在你的 turn.js 初始化代码里设置 view的高度等属性
viewer.setDimensions({
width: '100%', // 自适应宽度
height: 'auto',
pageHeight: '100%' // 设置每一页的高度为视口高度
});
} else {
// 水平模式或未知方向,移除 vertical-scroll 类并调整回默认布局
document.body.classList.remove('vertical-scroll');
viewer.setDimensions({
width: '100%', // 自适应宽度
height: 'auto',
pageHeight: '' // 如果不需要自动适应,可以指定固定值
});
}
});
```
在这个例子中,当你加入 `.vertical-scroll` 类,`turn.js` 的 viewer 就会按照垂直滚动的方式来展示内容。
阅读全文