turn.js的每一页的class样式是谁来控制的

在使用turn.js插件时，每一页的class样式是由插件自身控制的。turn.js插件会为每一页添加相应的class，以便于控制页面的样式和行为。

具体而言，turn.js插件会为每一页添加以下class样式：

- `page`：每一页都会有这个class。
- `hard`：当你设置了`hard: true`选项时，会为硬页添加这个class。
- `own-size`：当你设置了`autoCenter: true`选项时，会为自定义尺寸的页添加这个class。
- `odd`和`even`：用于标识奇数页和偶数页。

除了这些默认的class样式之外，你也可以使用`addClass()`方法来为每一页添加自定义的class样式。例如：

$(document).ready(function(){
  $('#book').turn({
    // turn.js配置选项
  });

  // 为每一页添加自定义class样式
  $('.page').addClass('custom-page');
});

在上述示例中，我们通过调用`addClass('custom-page')`方法为每一页添加了一个名为`custom-page`的自定义class样式。

通过控制这些class样式，你可以自定义每一页的外观和行为。

相关问题

Turn.js实现翻书效果

Turn.js 是一个基于 jQuery 的插件，可以实现在网页上类似书本翻页的效果。使用 Turn.js 插件可以为你的网站增添一份生动、有趣的交互体验，增强用户的阅读和交互体验。以下是一个简单的实现步骤：

1. 引入 jQuery 和 Turn.js 的库文件

<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` 元素，每个元素代表一页。例如：

<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 插件：

$(".book").turn({
  width: 400, // 容器宽度
  height: 300, // 容器高度
  autoCenter: true // 是否自动居中
});

4. 配置 Turn.js 插件

你可以通过在初始化代码中添加其他选项来更改 Turn.js 的默认设置。例如，你可以更改书本的阴影、背景颜色、翻页效果等。以下是一些常用的选项：

$(".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 样式来自定义书本的外观，例如更改字体、颜色、背景等。以下是一些常用的样式：

.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` 事件来在翻页完成后执行一些操作。以下是一些常用的方法和事件：

$(".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 插件实现翻书效果的简单步骤，具体效果和细节可以根据需求进行调整和优化。

Turn.js 插件实现翻书效果以及其目录

Turn.js 是一个基于 jQuery 的插件，可以实现网页版的翻书效果。它支持多种设备，包括桌面浏览器、平板电脑和移动设备。通过 Turn.js，可以实现类似于纸质书籍的翻页效果，同时还可以添加书签、目录等功能。

以下是使用 Turn.js 实现翻书效果和添加目录的简单步骤：

1. 引入 Turn.js 插件及其依赖库（jQuery 和 turn.min.js）：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/turn.min.js"></script>

2. 创建一个包含书页内容的容器：

<div id="flipbook">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
  <div class="page">Page 4</div>
</div>

3. 初始化 Turn.js 插件：

$("#flipbook").turn({
  width: 800, // 容器宽度
  height: 600, // 容器高度
  autoCenter: true // 自动居中
});

4. 添加目录：

// 定义目录项
var pages = [
  {name: "Page 1", page: 1},
  {name: "Page 2", page: 2},
  {name: "Page 3", page: 3},
  {name: "Page 4", page: 4}
];

// 创建目录容器
var $bookmarks = $("<ul/>", {"class": "bookmarks"});

// 添加目录项
$.each(pages, function(index, page) {
  $("<li/>")
    .html("<a href='#' data-page='" + page.page + "'>" + page.name + "</a>")
    .appendTo($bookmarks);
});

// 插入到页面中
$bookmarks.appendTo($("#flipbook"));

// 绑定目录项的点击事件
$(".bookmarks a").on("click", function() {
  var page = $(this).data("page");
  $("#flipbook").turn("page", page);
  return false;
});

通过以上步骤，就可以实现基本的翻书效果和目录功能。如果需要更多的自定义样式和交互效果，可以参考 Turn.js 的官方文档进行调整。