携帯電話のスライドプラグイン---fullPage.js----使用
6340 ワード
今、私たちはよく全画面のウェブサイト、特に海外のウェブサイトを見ることができます.これらのサイトはいくつかの大きな画像や色のブロックを背景にして、簡単な内容を追加して、特にハイエンドの大気のレベルに見えます.
fullPage.jsはjQueryベースのプラグインで、便利で簡単に全画面のウェブサイトを作ることができて、ちょうど最近会社の1つのプロジェクトが全画面を使うことができて、しかも
トップページ全体がスライドし、その他は正常にスライドします.もちろん他の需要があるので、ここではくどくど言わないでください.直接乾物に乗ります--------
オプション
を選択します.
デフォルト
説明
verticalCentered
文字列
true
コンテンツが垂直に中央に配置されているかどうか
resize
ブール値
false
ウィンドウの拡大・縮小に伴うフォントの拡大・縮小
slidesColor
関数＃カンスウ＃
なし
背景色の設定
anchors
はいれつ
なし
アンカーリンクの定義
scrollingSpeed
整数
700
ミリ秒単位でスクロール
easing
文字列
easeInQuart
アニメーションのスクロール方法
menu
ブール値
false
メニューをバインドし、設定した関連属性がanchorsの値に対応すると、メニューはスクロールを制御できます.
navigation
ブール値
false
プロジェクトナビゲーションを表示するかどうか
navigationPosition
文字列
right
プロジェクトナビゲーションの場所、オプションleftまたはright
navigationColor
文字列
#000
プロジェクトナビゲーションの色
navigationTooltips
はいれつ
空
プロジェクトナビゲーションのtip
slidesNavigation
ブール値
false
左右のスライダの項目ナビゲーションを表示するかどうか
slidesNavPosition
文字列
bottom
左右のスライダの項目ナビゲーションの位置は、topまたはbottomから選択可能です
controlArrowColor
文字列
#fff
左右のスライダの矢印の背景色
loopBottom
ブール値
false
一番下にスクロールして、一番上にスクロールするかどうか
loopTop
ブール値
false
一番上にスクロールして、一番下にスクロールするかどうか
loopHorizontal
ブール値
true
左右のスライダが循環スライドしているか
autoScrolling
ブール値
true
プラグインのスクロール方法を使用するかどうか、falseを選択するとブラウザに付属のスクロールバーが表示されます
scrollOverflow
ブール値
false
コンテンツが画面いっぱいになった後にスクロールバーを表示するかどうか
css3
ブール値
false
CSS 3 transformsを使用してスクロールするかどうか
paddingTop
文字列
0
上部からの距離
paddingBottom
文字列
0
ボトムからの距離
fixedElements
文字列
なし
normalScrollElements
なし
keyboardScrolling
ブール値
true
キーボードの方向キーを使用してナビゲートするかどうか
touchSensitivity
整数
5
continuousVertical
ブール値
false
ループスクロールするかどうかは、loopTopおよびloopBottomと互換性がありません
animateAnchor
ブール値
true
normalScrollElementTouchThreshold
整数
5
fullPage.js中国語api方法
名前
説明
moveSectionUp()
スクロールアップ
moveSectionDown()
下にスクロール
moveTo(section, slide)
スクロール先
moveSlideRight()
slide右スクロール
moveSlideLeft()
slide左スクロール
setAutoScrolling()
ページのスクロール方法を設定し、trueに設定すると自動的にスクロールします.
setAllowScrolling()
マウスホイール/タッチパネルコントロールの追加または削除
setKeyboardScrolling()
キーボードハンドルコントロールの追加または削除
setScrollingSpeed()
ミリ秒単位でのスクロール速度の定義
fullPage.js中国語apiコールバック関数
名前
説明
afterLoad
ある画面にスクロールした後のコールバック関数は、anchorLinkとindexの2つのパラメータを受信します.anchorLinkはアンカーリンクの名前で、indexはシーケンス番号で、1から計算します.
onLeave
スクロール前のコールバック関数は、index、nextIndex、directionの3つのパラメータを受信します.indexは離れた「ページ」のシーケンス番号で、1から計算します.nextIndexはスクロールした「ページ」のシーケンス番号で、1から計算を開始します.Directionは、上へスクロールするか下へスクロールするかを判断し、値はupまたはdownです.
afterRender
ページ構造生成後のコールバック関数、またはページ初期化完了後のコールバック関数
afterSlideLoad
ある水平スライダにスクロールした後のコールバック関数は、afterLoadと同様にanchorLink、index、slideIndex、directionの4つのパラメータを受信します.
onSlideLeave
ある水平スライダがスクロールする前のコールバック関数は、onLeaveと同様にanchorLink、index、slideIndex、directionの4つのパラメータを受信します.
fullPage.jsはjQueryベースのプラグインで、便利で簡単に全画面のウェブサイトを作ることができて、ちょうど最近会社の1つのプロジェクトが全画面を使うことができて、しかも
トップページ全体がスライドし、その他は正常にスライドします.もちろん他の需要があるので、ここではくどくど言わないでください.直接乾物に乗ります--------
オプション
を選択します.
デフォルト
説明
verticalCentered
文字列
true
コンテンツが垂直に中央に配置されているかどうか
resize
ブール値
false
ウィンドウの拡大・縮小に伴うフォントの拡大・縮小
slidesColor
関数＃カンスウ＃
なし
背景色の設定
anchors
はいれつ
なし
アンカーリンクの定義
scrollingSpeed
整数
700
ミリ秒単位でスクロール
easing
文字列
easeInQuart
アニメーションのスクロール方法
menu
ブール値
false
メニューをバインドし、設定した関連属性がanchorsの値に対応すると、メニューはスクロールを制御できます.
navigation
ブール値
false
プロジェクトナビゲーションを表示するかどうか
navigationPosition
文字列
right
プロジェクトナビゲーションの場所、オプションleftまたはright
navigationColor
文字列
#000
プロジェクトナビゲーションの色
navigationTooltips
はいれつ
空
プロジェクトナビゲーションのtip
slidesNavigation
ブール値
false
左右のスライダの項目ナビゲーションを表示するかどうか
slidesNavPosition
文字列
bottom
左右のスライダの項目ナビゲーションの位置は、topまたはbottomから選択可能です
controlArrowColor
文字列
#fff
左右のスライダの矢印の背景色
loopBottom
ブール値
false
一番下にスクロールして、一番上にスクロールするかどうか
loopTop
ブール値
false
一番上にスクロールして、一番下にスクロールするかどうか
loopHorizontal
ブール値
true
左右のスライダが循環スライドしているか
autoScrolling
ブール値
true
プラグインのスクロール方法を使用するかどうか、falseを選択するとブラウザに付属のスクロールバーが表示されます
scrollOverflow
ブール値
false
コンテンツが画面いっぱいになった後にスクロールバーを表示するかどうか
css3
ブール値
false
CSS 3 transformsを使用してスクロールするかどうか
paddingTop
文字列
0
上部からの距離
paddingBottom
文字列
0
ボトムからの距離
fixedElements
文字列
なし
normalScrollElements
なし
keyboardScrolling
ブール値
true
キーボードの方向キーを使用してナビゲートするかどうか
touchSensitivity
整数
5
continuousVertical
ブール値
false
ループスクロールするかどうかは、loopTopおよびloopBottomと互換性がありません
animateAnchor
ブール値
true
normalScrollElementTouchThreshold
整数
5
fullPage.js中国語api方法
名前
説明
moveSectionUp()
スクロールアップ
moveSectionDown()
下にスクロール
moveTo(section, slide)
スクロール先
moveSlideRight()
slide右スクロール
moveSlideLeft()
slide左スクロール
setAutoScrolling()
ページのスクロール方法を設定し、trueに設定すると自動的にスクロールします.
setAllowScrolling()
マウスホイール/タッチパネルコントロールの追加または削除
setKeyboardScrolling()
キーボードハンドルコントロールの追加または削除
setScrollingSpeed()
ミリ秒単位でのスクロール速度の定義
fullPage.js中国語apiコールバック関数
名前
説明
afterLoad
ある画面にスクロールした後のコールバック関数は、anchorLinkとindexの2つのパラメータを受信します.anchorLinkはアンカーリンクの名前で、indexはシーケンス番号で、1から計算します.
onLeave
スクロール前のコールバック関数は、index、nextIndex、directionの3つのパラメータを受信します.indexは離れた「ページ」のシーケンス番号で、1から計算します.nextIndexはスクロールした「ページ」のシーケンス番号で、1から計算を開始します.Directionは、上へスクロールするか下へスクロールするかを判断し、値はupまたはdownです.
afterRender
ページ構造生成後のコールバック関数、またはページ初期化完了後のコールバック関数
afterSlideLoad
ある水平スライダにスクロールした後のコールバック関数は、afterLoadと同様にanchorLink、index、slideIndex、directionの4つのパラメータを受信します.
onSlideLeave
ある水平スライダがスクロールする前のコールバック関数は、onLeaveと同様にanchorLink、index、slideIndex、directionの4つのパラメータを受信します.
1. afterLoad(anchorLink, index)afterLoad:function(anchorLink, index){
console.log("anchorLink:"+anchorLink+"\t index:"+index); }, 2. onLeave(index, nextIndex,direction)onLeave:function(index,nextIndex,direction){
console.log("index:"+index+" nextIndex:"+nextIndex+" direction:"+direction); }, 3. afterRender()afterRender:function(){
console.log("afterRender");
}, 4. afterResize()afterResize:function(){
console.log("afterResize"); }, 5. afterSlideLoad(anchorLink, index, slideAnchor, slideIndex)afterSlideLoad:function(anchorLink, index, slideAnchor, slideIndex){
console.log("anchorLink:" + anchorLink +" index:" + index +" slideAnchor:" + slideAnchor +" slideIndex:" + slideIndex ); }, 6. onSlideLeave(anchorLink, index, slideAnchor, direction, slideIndex)onSlideLeave:function(anchorLink, index, slideAnchor, direction, slideIndex){
console.log("anchorLink:" + anchorLink +" index:" + index +" slideAnchor:" + slideAnchor +" direction:" + direction +" slideIndex:" + slideIndex ); },