Fullpage プラグイン開発の全画面ページめくり手順の詳細な説明

今回は、Fullpage プラグインを使用して全画面ページめくりを開発する手順について詳しく説明します。実際のケースを見てみましょう。 フルスクリーンのページめくり Web サイトは非常にハイエンドに見えますが、一部の学生にとってはネイティブで開発するのが依然として非常に難しい場合があります。

今日は、この効果も実現できる Fullpage プラグインを紹介します。

Xiaomi Web サイトのこのページを生徒に見せましょう: http://www.mi.com/hongmi2a/

このページを読んだ後は、早速今日のテーマに移りましょう。

1. いくつかの必要なリソース

rreee

2. ページの構造

そうです 3. 1 つにスライド効果が必要な場合、構造は次のようになります

//jquery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
//fullpage插件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
//滚动条插件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script>
//fullpage.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="external nofollow" >

これでシンプルな

ページレイアウト

が完成しました。あとはプラグインのAPI構造を使用するだけです 4. プラグインの形式と使用法:

<p id="fullpage">
    <p class=&#39;section&#39;>第一页</p>
    <p class=&#39;section&#39;>第二页</p>
    <p class=&#39;section&#39;>第三页</p>
    <p class=&#39;section&#39;>第四页</p>
</p>

5. API インターフェースの一部

<p class=&#39;section&#39;>
    <p class=&#39;slide&#39;>第一张幻灯片</p>
    <p class=&#39;slide&#39;>第一张幻灯片</p>
    <p class=&#39;slide&#39;>第一张幻灯片</p>
</p>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がFullpage プラグイン開発の全画面ページめくり手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。