Fullpage プラグインが全画面のページめくりエフェクト ページを迅速に開発する方法

この記事では、Fullpage プラグインを使用して全画面フリップ ページをすばやく開発する方法を分析します。この機能は非常に高度です。Script House のエディターに従って、Fullpage プラグインを見てみましょう。はこの効果を実現します

フルスクリーンのページめくり Web サイトは非常にハイエンドに見えますが、一部の学生にとってはネイティブで開発するのが依然として非常に難しい場合があります。

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

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

このページを読んだ後、今日のトピックに直接進みましょう!

1. 必要なリソース

2. ページの構造

//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" >

3. スライド効果が必要な場合、構造は次のとおりです

これは、プラグインの 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.

りー

以上がFullpage プラグインが全画面のページめくりエフェクト ページを迅速に開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。