turn.js怎么获取当前页
时间: 2023-07-31 17:06:53 浏览: 79
要获取 `turn.js` 中的当前页,可以使用 `page` 方法。以下是获取当前页的示例代码:
```javascript
const currentPage =flipbook").turn("page");
console.log("当前页:" + currentPage);
```
上述代码中,我们使用 `$("#flipbook")` 选择了 `flipbook` 容器,并通过调用 `.turn("page")` 方法获取当前页的页码。然后,我们可以将当前页码打印到控制台或进行其他操作。
请确保在调用 `page` 方法之前,已经初始化了 `turn.js` 并且 `flipbook` 容器已经加载完成。
希望这个示例能够帮助你获取 `turn.js` 中的当前页。如果有其他问题,请随时提问。
相关问题
怎么获取turn.js创建的书的某一页的翻转程度
要获取 turn.js 创建的书的某一页的翻转程度,你可以使用 turn.js 提供的 API 方法来获取指定页的翻页进度。
在 turn.js 中,可以使用 `turn` 对象的 `view` 方法来获取当前可见页的信息。通过指定页码,你可以获取特定页的翻页进度。
以下是一个示例:
```javascript
// 获取第三页的翻页进度
var page = 3;
var progress = $("#flipbook").turn("view", page)[0].progress;
console.log("第三页的翻转程度:", (progress * 100).toFixed(2) + "%");
```
在上述代码中,我们使用 turn.js 的 `view` 方法来获取第三页的信息,然后通过索引访问第一个元素并获取其翻页进度。最后,我们将翻页进度转换为百分比形式,并输出到控制台。
请注意,在使用此方法之前,确保已经初始化了 turn.js 插件,并且书籍已经加载和渲染完毕。另外,确保 `page` 变量中指定的页码是存在于书籍中的有效页码。
通过类似的方式,你可以获取任何特定页的翻转程度。根据你的需求,可以将此代码嵌入到适当的事件处理程序中,以实现实时监测和输出某一页的翻转程度。
Turn.js实现翻书效果
Turn.js 是一个基于 jQuery 的插件,可以实现在网页上类似书本翻页的效果。使用 Turn.js 插件可以为你的网站增添一份生动、有趣的交互体验,增强用户的阅读和交互体验。以下是一个简单的实现步骤:
1. 引入 jQuery 和 Turn.js 的库文件
```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script>
```
2. 创建 HTML 结构
在 HTML 文件中创建一个 `div` 元素用于容纳书本,然后在其中添加若干个 `div` 元素,每个元素代表一页。例如:
```html
<div class="book">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
```
3. 初始化 Turn.js 插件
在 JavaScript 文件中使用以下代码初始化 Turn.js 插件:
```javascript
$(".book").turn({
width: 400, // 容器宽度
height: 300, // 容器高度
autoCenter: true // 是否自动居中
});
```
4. 配置 Turn.js 插件
你可以通过在初始化代码中添加其他选项来更改 Turn.js 的默认设置。例如,你可以更改书本的阴影、背景颜色、翻页效果等。以下是一些常用的选项:
```javascript
$(".book").turn({
width: 400,
height: 300,
autoCenter: true,
display: "double", // 单页或双页显示
acceleration: true, // 是否使用硬件加速
gradients: true, // 是否开启渐变效果
elevation: 50, // 抬高度,即书本的厚度
pageNumbers: true, // 是否显示页码
shadows: true, // 是否显示阴影
when: {
turned: function(e, page) {
console.log("Current view: ", $(this).turn("view"));
}
} // 翻页完成后的回调函数
});
```
5. 自定义样式
你可以使用 CSS 样式来自定义书本的外观,例如更改字体、颜色、背景等。以下是一些常用的样式:
```css
.book {
background: #eee;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
.book > div {
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
color: #333;
padding: 20px;
text-align: center;
}
```
6. 使用插件方法和事件
你可以使用 Turn.js 插件提供的方法和事件来控制书本的行为。例如,你可以使用 `next` 和 `previous` 方法来翻到下一页或上一页,使用 `page` 方法来翻到指定页码。你也可以使用 `turned` 事件来在翻页完成后执行一些操作。以下是一些常用的方法和事件:
```javascript
$(".book").turn("next"); // 翻到下一页
$(".book").turn("previous"); // 翻到上一页
$(".book").turn("page", 3); // 翻到第 3 页
$(".book").turn("view"); // 获取当前显示的页码
$(".book").on("turned", function(e, page) {
console.log("Page turned: ", page);
}); // 翻页完成后的回调函数
```
以上就是使用 Turn.js 插件实现翻书效果的简单步骤,具体效果和细节可以根据需求进行调整和优化。