コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JQuery のturn.js ライブラリを使用して本のめくり効果を実現する方法の簡単な分析

青灯夜游
リリース： 2022-09-07 10:58:36
転載
2234 人が閲覧しました

この記事では、jQuery のturn.js ライブラリを紹介し、turn.js ライブラリを使用して本をめくる効果を実現する方法について説明します。

JQuery のturn.js ライブラリを使用して本のめくり効果を実現する方法の簡単な分析

今日は JQ のturn.js を紹介します まず、今日の主役のturn.js について簡単に紹介します。 [関連チュートリアルの推奨事項: jQuery チュートリアル ]

Turn.js は、HTML5 のすべての利点を組み合わせた JavaScript ライブラリで、コンテンツを書籍や雑誌のように見せることができます。反転効果。

HTML5 と CSS3 を使用してエフェクトを実行するため、iOS デバイス (iPad、iPhone、iPod) や Android デバイスなどのタッチ デバイスで適切に動作します~
Turn.js には Flash コンテンツよりも多くの機能がありますネイティブ コンテンツ (オプションのコンテンツ、サードパーティのコンテキスト メニューなし) の感触と、広告コード、HTML5 ビデオ、ツールヒント、画像、地図、フォームを追加し、すべてのページを追跡する機能を除き、実際の HTML コンテンツの利点をすべて備えており、それらを組み合わせることができます。何百もの優れた Web 用ライブラリを備えています。

***この記事のキーワード:turn.js 属性値、使用法、デモ コード (記事の最後にある付録を参照~~)。

効果は次のとおりです。

公式サンプルコード:

html: 

<div id = “ flipbook” >
   <div class = “ hard” > Turn.js </ div>
   <div class = “ hard” > </ div>
   <div> 第1页 </ div>
   <div> 第2页 < / div>
   <div> 第3页 </ div>
   <div> 第4页 </ div>
   <div class = “ hard” > </ div>
   <div class = “ hard” > </ div>
</ div>
ログイン後にコピー

js:

  • ステップ 1: 最初に JQ ファイルを忘れずに導入してください (バージョン 1.3 以降のみが可能です) ~~)

  • ステップ 2: 公式 Web サイト (公式アドレス: http://www.turnjs.com/) からダウンロードできる Turn.js ファイルを導入します。 )

  • ステップ 3: 次に、主人公のturn.jsを使用できます~~コードは次のとおりです↓↓↓

 <script type = “ text / javascript” >
 $（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;
 </ script>
ログイン後にコピー

注: 授業は難しくても理解できます。本の (最初と最後の) 表紙に

  • 特徴

✓iPad および iPhone に適しています。
✓ シンプル、美しく、強力な API。
✓Ajax リクエストを介したページの動的な読み込みを許可します。
✓純粋な HTML5/CSS3 コンテンツ。
✓2 つのトランジション エフェクト。
✓ Turn.html4.js を使用する IE 8 などの古いブラウザーで動作します。

  • jQuery 1.3 以降が必要です。
    • ブラウザのサポート
Safari 5 Chrome 16 Firefox 10 IE 10、9、8

デバイス
✓ すべての iOS (iPad、iPhone、iPod)
✓ Android (Chrome for Android)


改善点

    #Turn.js 4 には、その核となる一連の重要なパフォーマンスの改善があります。
  • ✓ブラウザ プラットフォームでの効果がよりスムーズになりました。
    • ✓新しい DOM 構成により、ページ サイズに関係なく同じパフォーマンスが保証されます。


補完

    turn.html4.js -turn.js の HTML4 バージョン。
  • zoom.js -turn.js の新しいズーム機能。例を参照してください。
    • Scissors.js -turn.js は 2 つの部分に分かれています。
hash.js - PushState ハッシュと URI ハッシュを使用してナビゲーション履歴を制御します。



API ドキュメント

    turn.js API は、jQuery の UI プラグインとして便利に構築されており、一連の機能へのアクセスを提供し、ユーザー インタラクションを定義できます。
  • 完全なドキュメントはここから、または PDF 形式で入手できます。
#オプション


加速アクセラレーション

  • autoCenter自動センタリング

  • direction 方向

  • display 表示

  • duration 継続時間

  • gradients gradient

  • 高さ高さ

  • 標高

  • ページ ページ

    • #pages ページ数

    • turnCorners

    • 関数実行時

    • width width

    • zoom ズームインおよびズームアウト

  • プロパティ

アニメーションのアニメーション

    方向 方向

    • 表示 表示

  • ##無効無効

  • #page ページ

  • #pages ページ数

  • ##size サイズ

    • ##オプション

    • view ビュー

    • zoom ズームインおよびズームアウト

  • メソッド メソッド

  • addPage

center

    destroy

    • direction

    • display

    • disable

    • hasPage

    • 次

    • は

    • #ページ

    • ページ

    • peel

    • previous

    • range

  • ##removePage

  • サイズ変更

  • サイズ

  • 停止

  • ##バージョン

  • zoom

  • イベント イベント

  • ##end

  • first

last

  • 欠落

  • start

  • turning

  • #turned

  • zooming

  • ##CSS クラス class class

  • #.even

  • .fixed

##.hard

##.奇数

  • .独自のサイズ

  • .page

  • .p[0-9]+

  • .shadow

  • .sheet

附录demo 代码

demo && 代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #flipbook div {
                text-align: center;
                line-height: 500px;
            }
            .backward,
            .forward{
                width: 40px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <!-- 官方示例代码 -->
        <!-- <div id="flipbook">
            <div class="hard">  Turn.js  </div>
            <div class="hard"> </div>
            <div>  第1页 </div>
            <div>  第2页 </div>
            <div>  第3页 </div>
            <div>  第4页 </div>
            <div class="hard"> </div>
            <div class="hard"> </div>
        </div> -->

        <div id="flipbook">
          <div style="background: pink;" class="hard"> </div>
          <div style="background: olivedrab;" class="hard"> </div>
          <div style="background: palegoldenrod;"> Page 1 </div>
          <div style="background: paleturquoise;"> Page 2 </div>
          <div style="background: plum;"> Page 3 </div>
          <div style="background: mediumaquamarine;"> Page 4 </div>
          <div style="background: greenyellow;"> Page 5 </div>
          <div style="background: darkkhaki;"> Page 6 </div>
          <div style="background: aqua;" class="hard"> </div>
          <div style="background: teal;" class="hard"> </div>
        </div>

        <!-- 前一页 -->
        <img src="img/backward.png" class="backward" onclick="backwardPage()">
        <!-- 后一页 -->
        <img src="img/forward.png" class="forward" onclick="forwarPage()">
    </body>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/turn.min.js"></script>
    <script>
        $("#flipbook").turn({
          width: 600,
          height: 500,
          // acceleration: true, // 是否加速，对于触摸屏的设备，这个值必须为true
          // autoCenter: true, // 是否居中 默认值false
          // direction: "ltr", // 翻书方向，值为rtl / ltr（3种写法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }
          display: 'double', // 显示单页or双页,默认值是double (如果single, class为hard的div首末各一个就可以)
        });

        function backwardPage() {
            $("#flipbook").turn("previous");
        }

        function forwarPage() {
            $("#flipbook").turn("next");
        }
    </script>
</html>
ログイン後にコピー

demo如下：

 按钮图片：

 

【推荐学习：jQuery视频教程、web前端视频】

以上がJQuery のturn.js ライブラリを使用して本のめくり効果を実現する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery turn.js
ソース：cnblogs.com
前の記事：jQuery の新しいバージョン 3.6.1 がリリースされました。改善点をチェックしてください。 次の記事：Node.js ソース コードを調べ、cjs モジュールの読み込みプロセスを詳細に説明します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
2015
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2179
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1838
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1730
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1750
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート