JQuery のturn.js ライブラリを使用して本のめくり効果を実現する方法の簡単な分析-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2022-09-07 10:58:36

転載

2177 人が閲覧しました

この記事では、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)

改善点

✓ブラウザプラットフォームでの効果がよりスムーズになりました。

補完

zoom.js -turn.js の新しいズーム機能。例を参照してください。

hash.js - PushState ハッシュと URI ハッシュを使用してナビゲーション履歴を制御します。

API ドキュメント

完全なドキュメントはここから、または PDF 形式で入手できます。

#オプション

加速アクセラレーション

autoCenter自動センタリング
direction 方向
display 表示
duration 継続時間
gradients gradient
高さ高さ
標高
ページページ
プロパティ

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

##無効無効
#page ページ
#pages ページ数
##size サイズ
メソッドメソッド
addPage

center

##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如下：

按钮图片：