jquery は全画面スクロールを実装します_jquery-jsチュートリアル-php.cn

jquery は全画面スクロールを実装します_jquery

WBOY

リリース： 2016-05-16 15:23:14

オリジナル

1712 人が閲覧しました

多くの場合、特にモバイルでは、ページを全画面でスクロールする必要があります。今日は全画面スクロールの知識を簡単に紹介します。

1. 全画面スクロールの原理
1.js は画面の高さを動的に取得します。

画面の高さを取得し、各画面の高さを設定します。

2. マウスホイールイベントをリッスンします。

マウスホイールイベントをリッスンし、1 画面上または下にスクロールするホイールの方向を決定します。

2. jQuery プラグインのフルページの紹介
fullPage.js は、jQuery をベースにしたプラグインで、フルスクリーン Web サイトを簡単かつ便利に作成できます。

マウススクロールをサポート
前進、後進、およびキーボード制御をサポート
複数のコールバック関数
携帯電話やタブレットでのタッチイベントをサポート
CSS3 アニメーションをサポート
ウィンドウのスケーリングをサポート
ウィンドウがズームされたときに自動的に調整します
スクロール幅、背景色、スクロール速度、ループオプション、コールバック、テキスト配置などを設定できます。

使用方法

1. ファイルをインポートします

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

ログイン後にコピー

2. HTML

<div id="dowebok">
  <div class="section">
    <h3>第一屏</h3>
  </div>
  <div class="section">
    <h3>第二屏</h3>
  </div>
  <div class="section">
    <h3>第三屏</h3>
  </div>
  <div class="section">
    <h3>第四屏</h3>
  </div>
</div>

ログイン後にコピー

各セクションは 1 つの画面を表し、デフォルトでは「最初の画面」が表示されます。ページをロードするときに表示される「画面」を指定したい場合は、対応するセクションに class="active" を追加します。 :

<div class="section active">第三屏</div>

ログイン後にコピー

同時に、次のようなスライド (左右にスワイプ) をセクション内に追加できます。

<div id="fullpages">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
  </div>
  <div class="section">第四屏</div>
</div>

ログイン後にコピー

3. JavaScript

$(function(){
  $('#fullpages').fullpage();
});

ログイン後にコピー

多くの構成を実行できます:

$(document).ready(function() {
  $('#fullpages').fullpage({
    //Navigation
    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: false,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,

    //Accessibility
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    resize : false,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,

    //Custom selectors
    sectionSelector: '.section',
    slideSelector: '.slide',

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
  });
});

ログイン後にコピー

3. 手書きの全画面スクロール
ここでは主にマウスホイールイベントの監視とスクロールについて紹介します。

マウスホイールイベントの互換性のため、ホイールイベントをリッスンするために jquery-mousewheel プラグインが引用されています。

マウスホイールの方向と速度は、パラメーターデルタを通じて取得できます (古いバージョンではデルタパラメーターを渡す必要がありますが、新しいバージョンではその必要はありません。イベントを使用して直接取得します)。デルタの値が負の場合、スクロールホイールは下にスクロールし、デルタの値が正の場合、上にスクロールします。

// using on
$('#my_elem').on('mousewheel', function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

ログイン後にコピー

必要に応じてフルページを使用して全画面スクロール (上下左右) を実現したり、jquery-mousewheel を使用してさまざまな高さでの全画面スクロールをカスタマイズしたりできます。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。