ホームページ > 記事 > ウェブフロントエンド > jQuery の Scrollify プラグインは、page_jquery 上の次のノードへのスライドを実装します。

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

WBOYオリジナル: 2016-05-16 15:51:311326ブラウズ

製品の機能を紹介するために単一のページを作成する必要がある場合、その単一のページには多くのコンテンツがあり、ページが非常に長いため、製品の機能ノードをすばやく見つけるために、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 は、次のようなメソッド呼び出しも提供します。

$.scrollify("move","#name");

上記のコードは、#name のノードまで直接スクロールできます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明：

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

前の記事：jQueryの動的背景画像エフェクト実装method_jquery次の記事：jQueryの動的背景画像エフェクト実装method_jquery

続きを見る

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

関連記事