ホームページ  >  記事  >  ウェブフロントエンド  >  jquery fullpage プラグインにヘッダーと著作権を追加する方法についての簡単な説明

jquery fullpage プラグインにヘッダーと著作権を追加する方法についての簡単な説明

亚连
亚连オリジナル
2018-05-25 17:16:511278ブラウズ

ここで、jquery fullpage プラグインを使用してヘッダーと著作権を追加する方法について簡単に説明します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

はじめに

ページは jquery-fullpage プラグインを通じて作成され、ページ全体が全画面スクロールします。ただし、著作権のために全画面を必要とせずに、高さわずか約 100 ピクセルの最後のページに著作権を追加したいと考えています。どうやってするの?調べてみると色々な方法が見つかりました。ソースコードなどを修正するか、独自のコードを書いて判断してください。めまい。実際、公式のソリューションが提供されています。

それでは、実装方法について簡単に説明します

実際に実装に必要なのはHTML部分だけです

<p class="fullpage">
 <p class="section fp-auto-height">这里写头部</p>
 <p class="section">page1</p>
 <p class="section">page2</p>
 <p class="section">page3</p>
 <p class="section">page4</p>
 <p class="section fp-auto-height">这里写版权</p>
</p>

上記のように、実行できる限り、JSコードについては説明しません。問題ありません。ここでは、fp-auto-height クラスを頭と底に追加するだけです。

効果ないですか?

これは、以下の CSS ではなく js を引用しただけだからです。

https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.css

実際、キーコードは次のとおりです

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
 height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
 height: auto !important;
}

上記は私が皆さんのためにコンパイルしたものです, 今後も役立つことを願っています。

関連記事:

Ajaxのループスキーム

ajaxがオブジェクトObjectを返す簡単な解決策

jQueryでのajaxの4つの一般的なリクエストメソッドの紹介

以上がjquery fullpage プラグインにヘッダーと著作権を追加する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。