jQuery の Scrollify プラグインは、page_jquery 上の次のノードへのスライドを実装します。-jsチュートリアル-php.cn

jQuery の Scrollify プラグインは、page_jquery 上の次のノードへのスライドを実装します。

WBOY

リリース： 2016-05-16 15:51:31

オリジナル

1381 人が閲覧しました

製品の機能を紹介するために単一のページを作成する必要がある場合、その単一のページには多くのコンテンツがあり、ページが非常に長いため、製品の機能ノードをすばやく見つけるために、js を使用してユーザーの意見を聞きます。ホイールイベント。ユーザーがホイールスライドをトリガーしたとき、またはジェスチャを使用したとき。画面をタッチしてスライドすると、対応するノードを見つけることができます。 Scrollify と呼ばれる jQuery プラグインは、これを行うのに役立ちます。

Scrollify を実装するには、jQuery 1.6 とバッファアニメーションイージングプラグインが必要です。 HTML の基本構造は次のとおりです:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>scrollify</title> 
<!--[if lt IE 9]> 
<script src="html5shiv.min.js"></script> 
<![endif]--> 
<script src="jquery.js"></script> 
<script src="jquery.easing.min.js"></script> 
<script src="jquery.scrollify.min.js"></script> 
<script> 
  $(function() { 
    $.scrollify({ 
      section : "section", 
    }); 
  }); 
</script> 
</head> 
<body> 
  <section></section> 
  <section></section> 
</body> 
</html>

ログイン後にコピー

以下は、scrollify のデフォルトのオプション設定です:

$.scrollify({ 
    section : "section", 
    sectionName : "section-name", 
    easing: "easeOutExpo", 
    scrollSpeed: 1100, 
    offset : 0, 
    scrollbars: true, 
    before:function() {}, 
    after:function() {} 
});

ログイン後にコピー

オプションの説明:

セクション: ノードセクションセレクター。
SectionName: 各セクションノードに対応するデータ属性。
イージング: バッファアニメーションを定義します。
offset: 各カラーノードのオフセットを定義します。
スクロールバー: スクロールバーを表示するかどうか。
before: スクロールが開始される前にトリガーされるコールバック関数。 after: スクロールが完了した後にトリガーされるコールバック関数

Scrollify は、次のようなメソッド呼び出しも提供します。