jquery melaksanakan scrolling_jquery skrin penuh

Dalam banyak kes, kami memerlukan tatal skrin penuh halaman, terutamanya pada peranti mudah alih. Hari ini saya akan memperkenalkan secara ringkas pengetahuan menatal skrin penuh.

1. Prinsip menatal skrin penuh
1.js memperoleh ketinggian skrin secara dinamik.

Dapatkan ketinggian skrin dan tetapkan ketinggian setiap skrin.

2. Dengar acara roda tetikus.

Dengar acara roda tetikus dan tentukan arah roda untuk menatal ke atas atau ke bawah satu skrin.

2. Pengenalan kepada halaman penuh pemalam jQuery
fullPage.js ialah pemalam berdasarkan jQuery Ia boleh membuat tapak web skrin penuh dengan mudah dan mudah. ​​Fungsi utama ialah:

• Sokong menatal tetikus
• Menyokong kawalan ke hadapan, ke belakang dan papan kekunci
• Berbilang fungsi panggil balik
• Sokong acara sentuh pada telefon mudah alih dan tablet
• Sokong animasi CSS3
• Sokong penskalaan tetingkap
• Laraskan secara automatik apabila tetingkap dizum
• Boleh menetapkan lebar tatal, warna latar belakang, kelajuan tatal, pilihan gelung, panggil balik, penjajaran teks, dll.

Cara menggunakan

1. Import fail

<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>

Setiap bahagian mewakili satu skrin dan "skrin pertama" dipaparkan secara lalai Jika anda ingin menentukan "skrin" yang dipaparkan semasa memuatkan halaman, anda boleh menambah class="aktif" pada bahagian yang sepadan, seperti. :

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

Pada masa yang sama, anda boleh menambah slaid (leret ke kiri dan kanan) di dalam bahagian, seperti:

<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();
});

Banyak konfigurasi boleh dilakukan:

$(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. Penatalan skrin penuh tulisan tangan
Di sini kami terutamanya memperkenalkan pemantauan acara roda tetikus dan menatal.

Disebabkan keserasian acara roda tetikus, pemalam jquery-mousewheel dipetik untuk mendengar acara roda.

Arah dan kelajuan roda tetikus boleh diperolehi melalui parameter delta (versi lama perlu melepasi parameter delta, versi baharu tidak perlu, gunakan acara untuk mendapatkannya secara terus). Jika nilai delta adalah negatif, roda tatal akan menatal ke bawah, dan jika ia positif, ia menatal ke atas.

// 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);
});

Anda boleh menggunakan halaman penuh untuk mencapai penatalan skrin penuh (atas, bawah, kiri dan kanan) mengikut keperluan anda, atau anda boleh menggunakan jquery-mousewheel untuk menyesuaikan penatalan skrin penuh pada ketinggian yang berbeza.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.