検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery のturn.js ライブラリを使用して本のめくり効果を実現する方法の簡単な分析

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

青灯夜游
青灯夜游転載
2022-09-07 10:56:452226ブラウズ

この記事では、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 サイトの他の関連記事を参照してください。

声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：jQuery の新しいバージョン 3.6.1 がリリースされました。改善点をチェックしてください。次の記事：jQuery の新しいバージョン 3.6.1 がリリースされました。改善点をチェックしてください。

関連記事

続きを見る