3

Turn.js は非常に長いフリップブックで動作します。つまり、含まれるページ数に制限はありません。これは、本の長さに関係なく、turn.js が最後の 6 ページのみを DOM に保持するためです。以前にロードされたコンテンツへの参照は引き続き存在しますが、メモリを解放するためにキャッシュを減らすことができます。

最初の 7 ページを DOM に保持したい。どうすればこれを行うことができますか？ pagesInDOMturn.js で定義されているように、制限は 6 です。

html

<div id=”flipbook”&gt;
<div class=”hard”&gt;Page 1</div>
<div class=”hard”&gt;Page 2</div>
<div class=”hard”&gt;Page 3</div>
<div class=”hard”&gt;Page 4</div>
<div class=”hard”&gt;Page 5</div>
<div class=”hard”&gt;Page 6</div>
<div class=”hard”&gt;Page 7</div>
<div class=”hard”&gt;Page 8</div>
<div class=”hard”&gt;Page 9</div>
<div class=”hard”&gt;Page 10</div>
</div>

js

 var oTurn = $('#flipbook').turn({
        width: 1700,
        height: 850,
        elevation: 50,
        gradients: false,
        autoCenter: true,
        acceleration: true,
        start: function (event, pageObject, corner) {
            if (pageObject.next === 1)
                event.preventDefault();
        },
        turning: function (event, page, view) {
            if (page === 1)
                event.preventDefault();
        }
    });
4

2 に答える 2

2

pagesInDOM 変数は turn.js でハードコーディングされており、turn.js が jQuery を拡張するため、別の値を渡す方法が見つかりませんでした。ターンをインスタンス化するときにオプションとして利用できるようにしたいのですが、プロジェクトは現在死んでいるようです。私が見つけた唯一の解決策は、ファイルに入り、手動で別の値を割り当てることpagesInDOM = 7;です。

そうは言っても、宣言のすぐ上にある非縮小バージョンには、次のようなコメントがあります。

// Number of pages in the DOM, minimum value: 6
pagesInDOM = 6,

いくつかのテストを行ったところ、本が 4 ページ以上あり、この値が 6 を下回ると、範囲の終わりに近いページが読み込まれず、本をめくったときに空白のページが見つかります。これは、フリップ中に別のページをロードする必要があるかどうかを決定する範囲機能によるものだと思います。

turn.js から:

// Returns a range of pages that should be in the DOM
// Example:
// - page in the current view, return true
// * page is in the range, return true
// Otherwise, return false
// 1 2-3 4-5 6-7 8-9 10-11 12-13
//   **  **  --   **  **
range: function(page) {
    var remainingPages, left, right, view,
    data = this.data();
    page = page || data.tpage || data.page || 1;
    view = turnMethods._view.call(this, page);
    if (page<1 || page>data.totalPages)
        throw turnError('"'+page+'" is not a valid page');
    view[1] = view[1] || view[0];
    if (view[0]>=1 && view[1]<=data.totalPages) {
        remainingPages = Math.floor((pagesInDOM-2)/2);
        if (data.totalPages-view[1] > view[0]) {
            left = Math.min(view[0]-1, remainingPages);
            right = 2*remainingPages-left;
        } else {
            right = Math.min(data.totalPages-view[1], remainingPages);
            left = 2*remainingPages-right;
        }
    } else {
        left = pagesInDOM-1;
        right = pagesInDOM-1;
    }
    return [Math.max(1, view[0]-left),
            Math.min(data.totalPages, view[1]+right)];
},

つまり、turn.js の pagesInDOM の値を 7 に変更すると、目的の結果が得られるはずです。

于 2016-09-15T13:42:12.530 に答える