全屏滚动-jQuery插件实现

获取屏幕的高度，设置每一屏幕的高度。

监听mousewheel事件，并判断滚轮的方向，向上或向下滚动一屏。

使用方法

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>

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

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

同时，可以在 section 内加入 slide(左右滑动)，如：

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

4、配置

1）选项

2）方法

3）回调函数

更多请查看官方文档 https://github.com/alvarotrigo/fullPage.js/blob/master/README.md

示例： http://www.britishairways.com/en-gb/information/travel-classes/experience-our-cabins

三.动手写全屏滚动

这里主要介绍监听mousewheel事件及滚动。

由于mousewheel事件的兼容性，引用 jquery-mousewheel 插件来监听滚轮事件。

通过参数delta可以获取鼠标滚轮的方向和速度（旧版本需要传delta参数，新版本不需要，直接用event取）。如果delta的值是负的，那么滚轮就是向下滚动，正的就是向上。

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

总结：

可以根据需求使用fullpages实现全屏滚动（上下，左右），也可以使用jquery-mousewheel定制不同高度的全屏滚动。

-------------------------------------------------------------------------------------------------------------------------------------

完

来自： http://www.cnblogs.com/jingwhale/p/5079827.html