Fullpage プラグインが全画面のページめくりエフェクトページを迅速に開発する方法-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-09-15 09:14:55

オリジナル

1413 人が閲覧しました

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

ログイン後にコピー

りー

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