ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の Scrollify プラグインは、page_jquery 上の次のノードへのスライドを実装します。
jQuery の Scrollify プラグインは、page_jquery 上の次のノードへのスライドを実装します。
- WBOYオリジナル
- 2016-05-16 15:51:311357ブラウズ
製品の機能を紹介するために単一のページを作成する必要がある場合、その単一のページには多くのコンテンツがあり、ページが非常に長いため、製品の機能ノードをすばやく見つけるために、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("move","#name");
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。