分页：如何将长文本显示为书页？

Question

我有一个很长的文本，我想在网页中将它显示为一本书。用户将使用箭头键向前和向后移动，就像翻书页一样。

抛开页面的过渡，用jQuery怎么实现？

我的想法是计算将占据一页空间的文本量，然后将整个文本分成这些页面，然后显示它们。但是，即使我们修复了字体，占用的空间也将取决于平台，这似乎是一个坏主意。

我在使用空间计算方法时遇到的另一个问题是由于文本的 css 对齐显示。

以前有没有人为网页做过这样的事情？

Answer 1

以漂亮的书页格式布局长字符串。您需要获取确切的字符串部分。你可以使用这个功能。

function get_page($text, $page_index, $line_length=76, $page_length=40){
    $lines = explode("\n", wordwrap($texxt, $line_length, "\n"));
    $page_lines = array_slice($lines, $page_index*$page_length, $page_length);
    return implode("\n", $page_lines);
}

$line_length = 70;
$lines_per_page=50;
$page = 3;
$longtext= "...";

$page_text = get_page($longtext, $page-1, $line_length, $page_length);

见Demonstration。

示例

PHP

$longtext = "..."; // it can be retrieved from sql as well.
$index=is_int($_GET['page'])? intval($_GET['page']): 1;
$line_length = 70;
$lines_per_page=50;
$longtext= "...";

$page_text = get_page($longtext, $index-1, $line_length, $page_length);
echo json_encode(array('text'=>$page_text));

JQuery

var nextPage=2;
$.get("getpage.php", { page: nextPage }, function(data){
   alert("text is "+data.text;
   // show the text data.text
});