分頁：如何將長文本顯示為書頁？

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);

請參閱演示 。

例

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
});