[关闭]
@EncyKe 2016-11-04T07:01:52.000000Z 字数 16277 阅读 2578

JS：全屏滚动监视

前端 JavaScript

1. FullPageJS

1.1. HTML 部分

  1. <div id="fullpage">
  2.     <div class="section">1</div>
  3.     <div class="section">2</div>
  4.     <div class="section">
  5.         <div class="slide" style="text-align:center;color:#fff;">3.1</div>
  6.         <div class="slide" style="text-align:center;color:#fff;">3.2</div>
  7.         <div class="slide" style="text-align:center;color:#fff;">3.3</div>
  8.         <div class="slide" style="text-align:center;color:#fff;">3.4</div>
  9.     </div>
  10.     <div class="section">4</div>
  11. </div>

1.2. CSS 部分

  1. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.css">

1.3. jQuery 部分

  1. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
  2. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js"></script>
  3. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.js"></script>
  4. <script type="text/javascript">
  5.     $(function(){
  6. 		$('#fullpage').fullpage({
  7. 			// 按顺序定义每一section的背景颜色；
  8. 			sectionsColor:['green','orange','gray','red'],
  9. 			// 是否通过箭头控制slider幻灯片，默认为true；
  10. 			controlArrows: true,
  11. 			// 每一页内容是否垂直居中，默认为true；
  12. 			verticalCentered: true,
  13. 			// 字体是否随着窗口缩放，默认为false；
  14. 			resize: false,
  15. 			// 定义滚动速度，单位毫秒，默认为700；
  16. 			scrollingSpeed: 700,
  17. 			// 按顺序为每一section定义锚，定义时不需加#，值不可以与页面现有的id、name相同；
  18. 			anchors: ['p1','p2','p3','p4'],
  19. 			// 是否锁定锚链接，默认为false；若设为true，滚动页面时链接不发生变化；
  20. 			lockAnchors: false,
  21. 			// 定义滚动的动画方式，需引入jQuery UI或jQuery.easings才可使用；
  22. 			// easing: easeInOutCubic,
  23. 			// 是否使用CSS3 transform来实现滚动效果，默认为true；
  24. 			css3: true,
  25. 			// 滚动至顶部后是否连续滚动至底部，默认为false；
  26. 			loopTop: false,
  27. 			// 滚动至底部后是否连续滚动至顶部，默认为false；
  28. 			loopBottom: false,
  29. 			// slide是否循环滚动，默认为true；
  30. 			loopHorizontal: true,
  31. 			// 是否使用滚动方式，默认为true；若设为false，则会出现浏览器自带滚动条，且不按页滚动；
  32. 			autoScrolling: true,
  33. 			// 是否包含滚动条，默认为false；若设为true，则会有滚动条出现，但仍旧按页滚动；
  34. 			scrollBar: false,
  35. 			// 定义每一section顶部和底部padding；一般与fixedElement固定项搭配使用；
  36. 			paddingTop: 0,
  37. 			paddingBottom: 0,
  38. 			// 定义固定项，可配置一个jQuery选择器，使之固定不动；
  39. 			fixedElements: null,
  40. 			// 是否使用键盘方向键，默认为true；
  41. 			keyboardScrolling: true,
  42. 			// 定义移动端的滑动敏感度，默认为5，越大越难滑动；
  43. 			touchSensitivity: 5,
  44. 			// 是否循环滚动，默认为false；若设为true，则页面循环滚动，与loopTop、loopBottom不兼容；
  45. 			continuousVertical: false,
  46. 			// 锚链接是否可以控制滚动动画，默认为true；若设为false，则锚链接定位不再有动画；
  47. 			animateAnchor: true,
  48. 			// 是否记录历史，可通过浏览器历史前进后退来导航，默认为true；
  49. 			recordHistory: true,
  50. 			// 定义绑定菜单，可配置菜单的jQuery选择器，默认为false；
  51. 			menu: false,
  52. 			// 是否显示导航，默认为false；若设为true，将显示小圆点；
  53. 			navigation: false,
  54. 			// 定义小圆点位置，可为left、right等值；
  55. 			navigationPosition: '',
  56. 			// 按顺序定义小圆点的tooltip内容；
  57. 			navigationTooltips: ['p1','p2','p3','p4'],
  58. 			// 是否显示当前页导航的tooltip信息，默认为false；
  59. 			showActiveTooltip: false,
  60. 			// 是否显示slide的导航，默认为false；
  61. 			slidesNavigation: false,
  62. 			// slide的位置，默认为bottom，可设为top等；
  63. 			slidesNavPosition: 'bottom',
  64. 			// 内容超过满屏时是否显示滚动条，默认为false；若设为true，则显示滚动条，但需要引入jQuery.slimscroll.js；
  65. 			scrollOverFlow: false,
  66. 			// 定义section的选择器，默认为.section；
  67. 			sectionSelector: '.section',
  68. 			// 定义slide的选择器，默认为.slide；
  69. 			slideSelector: '.slide',	
  70. 		});
  71. 	});
  72.     /*
  73.     方法：$fn.fullpage.xxx()
  74.     moveSectionDown()：向上滚动一页；
  75.     moveSectionUp()：向下滚动一页；
  76.     moveTo(section,slide)：滚动至某section（自1起），某slide（自0起）；
  77.     slientMoveTo(sec1,length0)：与moveTo同，无动画效果；
  78.     moveSlideLeft()：slide向左滚动；
  79.     moveSlideRight()：slide向右滚动；
  80.     setAutoScrolling(boolean)：动态设置指定项；
  81.     setLockAnchors(boolean)：动态设置指定项；
  82.     setRecordHistory(boolean)：动态设置指定项；
  83.     setScrollingSpeed(ms)：动态设置指定项；
  84.     setAllowScrolling(boolean,[directions])：添加/删除鼠标滚轮、滑动控制，true为启用，方向参数可谓all, up, down, left, right，可多个，逗号分隔；
  85.     destroy(type/all)：销毁fullpage特效，默认为type，保留样式，无动效；若为all，则等同于裸奔；
  86.     reBuild()：重新更新页面和尺寸；
  87.     afterLoad: function(anchorLink, index){}：滚动至指定锚链接后，触发一次回调函数；
  88.     onLeave: function(index,nextIndex,direction){}：离开指定锚链接后，触发一次回调函数；index为离开的页面序号，nextIndex为滚动至的页面序号，方向参数为up、down；由return false;可取消滚动；
  89.     afterRender()：页面初始化后的回调函数；
  90.     afterResize()：页面尺寸变化后的回调函数；
  91.     afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}：滚动至指定slide后，触发一次回调函数；
  92.     onSliderLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}：离开指定slide后，触发一次回调函数；
  93.     */ 
  94. </script>

2. 全屏切换效果

2.1. HTML 部分

  1. <div id="container">
  2.     <div class="section active" id="section0">
  3.         <div class="intro">
  4.             <h1 class="title">switchPage</h1>
  5.             <p>Create Beautiful Fullscreen Scrolling Websites</p>
  6.         </div>
  7.     </div>
  8.     <div class="section" id="section1">
  9.         <div class="intro">
  10.             <h1 class="title">Example</h1>
  11.             <p>HTML markup example to define 4 sections</p>
  12.             <img src="images/example.png"/>
  13.         </div>
  15.     </div>
  16.     <div class="section" id="section2">
  17.         <div class="intro">
  18.             <h1 class="title">Example</h1>
  19.             <p>The plug-in configuration parameters</p>
  20.             <img src="images/example2.png"/>
  21.         </div>
  22.     </div>
  23.     <div class="section" id="section3">
  24.         <div class="intro">
  25.             <h1 class="title">THE END</h1>
  26.             <p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
  27.         </div>
  28.     </div>
  29. </div>

2.2. CSS 部分

  1. h1,body,html{
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5. body{
  6.     font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
  7. }
  8. html,body{
  9.     height: 100%;
  10.     overflow: hidden;
  11. }
  12. h1{
  13.     font-size: 6em;
  14.     font-weight: normal;
  15. }
  16. p{
  17.     font-size: 2em;
  18.     margin:0.5em 0 2em 0;
  19. }
  20. #container,.section{
  21.     height: 100%;
  22.     position: relative;
  23. }
  24. #section0,
  25. #section1,
  26. #section2,
  27. #section3{
  28.     background-color: #000;
  29.     background-size: cover;
  30.     background-position: 50% 50%;
  31. }
  32. #section0{
  33.     background-image: url(images/1.jpg);
  34.     color: #fff;
  35.     text-shadow:1px 1px 1px #333;
  36. }
  37. #section1{
  38.     color: #fff;
  39.     text-shadow:1px 1px 1px #333;
  40.     background-image: url(images/2.jpg);
  41. }
  42. #section2{
  43.     background-image: url(images/3.jpg);
  44.     color: #fff;
  45.     text-shadow:1px 1px 1px #666;
  46. }
  47. #section3{
  48.     color: #008283;
  49.     background-image: url(images/4.jpg);
  50.     text-shadow:1px 1px 1px #fff;
  51. }
  52. #section0 p{
  53.     color: #F1FF00;
  54. }
  55. #section3 p{
  56.     color: #00A3AF;
  57. }
  58. .left{
  59.     float: left;
  60. }
  61. .intro{
  62.     position: absolute;
  63.     top: 50%;
  64.     width: 100%;
  65.     -webkit-transform: translateY(-50%);
  66.     transform: translateY(-50%);
  67.     text-align: center;
  68. }
  69. #pages{
  70.     position:fixed;
  71.     right: 10px;
  72.     top: 50%;
  73.     list-style: none;
  74. }
  75. #pages li{
  76.     width: 8px;
  77.     height: 8px;
  78.     border-radius: 50%;
  79.     background: #fff;
  80.     margin: 0 0 10px 5px;
  81. }
  82. #pages li.active{
  83.     width: 14px;
  84.     height: 14px;
  85.     border: 2px solid #FFFE00;
  86.     background: none;
  87.     margin-left: 0;
  88. }
  89. #section0 .title{
  90.     -webkit-transform: translateX(-100%);
  91.     transform: translateX(-100%);
  92.     -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
  93.     animation: sectitle0 1s ease-in-out 100ms forwards;
  94. }
  95. #section0 p{
  96.     -webkit-transform: translateX(100%);
  97.     transform: translateX(100%);
  98.     -webkit-animation: sec0 1s ease-in-out 100ms forwards;
  99.     animation: sec0 1s ease-in-out 100ms forwards;
  100. }
  101. @-webkit-keyframes sectitle0{
  102.     0%{
  103.         -webkit-transform: translateX(-100%);
  104.         transform: translateX(-100%);
  105.     }
  106.     100%{
  107.         -webkit-transform: translateX(0);
  108.         transform: translateX(0);
  109.     }
  110. }
  111. @keyframes sectitle0{
  112.     0%{
  113.         -webkit-transform: translateX(-100%);
  114.         transform: translateX(-100%);
  115.     }
  116.     100%{
  117.         -webkit-transform: translateX(0);
  118.         transform: translateX(0);
  119.     }
  120. }
  121. @-webkit-keyframes sec0{
  122.     0%{
  123.         -webkit-transform: translateX(100%);
  124.         transform: translateX(100%);
  125.     }
  126.     100%{
  127.         -webkit-transform: translateX(0);
  128.         transform: translateX(0);
  129.     }
  130. }
  131. @keyframes sec0{
  132.     0%{
  133.         -webkit-transform: translateX(100%);
  134.         transform: translateX(100%);
  135.     }
  136.     100%{
  137.         -webkit-transform: translateX(0);
  138.         transform: translateX(0);
  139.     }
  140. }

2.3. jQuery 部分

  1. $(function(){
  2. 	$("#container").switchPage({
  3.         'loop' : true,
  4.         'keyboard' : true,
  5.         'direction' : 'horizontal'
  6.     });
  7. });
  1. (function ($) {
  2.     //判断浏览器含有属性类型
  3.     var _prefix = (function (temp) {
  4.         var prefix = ["webkit", "Moz", "o", "ms"];
  5.         var props = "";
  6.         for (var i = 0; i < prefix.length; i++) {
  7.             props = prefix[i] + "Transition";
  8.             if (temp.style[props] !== undefined) {
  9.                 return "-" + prefix[i].toLowerCase() + "-";
  10.             }
  11.         }
  12.         return false;
  13.         //猜测这里是随意创造一个节点，然后尝试判断该节点是否可以拥有该属性
  14.     })(document.createElement(PageSwitch));
  16.     //在这个函数类定义PageSwitch这个类
  17.     var PageSwitch = (function () {
  18.         //在这里传递进来的element代表的是一个jquery单对象，这里就是id为container的jquery对象
  19.         //this指代的就是这个当前引用创建的PageSwitch的对象，实际上指代的就是前面的instance对象
  20.         function PageSwitch(element, options) {
  21.             this.settings = $.extend(true, $.fn.PageSwitch.defaults, options || {});
  22.             this.element = element;
  23.             this.init();
  24.         }
  26.         //以下为定义PageSwitch的方法
  27.         PageSwitch.prototype = {
  28.             init : function () {
  29.                 //现在这里的this指的是一个变量，它保存有的jqueryDOM元素是id为container的div
  30.                 var me = this;
  31.                 //定位到默认的selectors的变量
  32.                 me.containers = me.settings.containers;
  33.                 //查找到符合情况的jquery元素
  34.                 me.sections = me.element.find(me.containers.sections);
  35.                 me.section = me.sections.find(me.containers.section);
  37.                 me.vertical = me.settings.vertical;
  38.                 me.pagesCounts = me.pageCount();
  39.                 me.activeIndex = (me.settings.activeIndex >= 0 && me.settings.activeIndex < me.pagesCounts) ? me.settings.activeIndex : 0;
  40.                 //添加事件
  41.                 me.canScroll = true;
  43.                 if (!me.vertical) {
  44.                     me._initLayout();
  45.                 }
  46.                 if (me.settings.pagination) {
  47.                     me._initPage();
  48.                 }
  50.                 me._initEvent();
  51.             },
  52.             //获取有多少页
  53.             pageCount : function () {
  54.                 return this.section.length;
  55.             },
  56.             //获取一个屏的长度或者高度
  57.             switchLength : function () {
  58.                 return this.direction ? this.element.height() : this.element.width();
  59.             },
  60.             //页码条初始化
  61.             _initPage : function () {
  62.                 var me = this;
  63.                 var pageClass = me.containers.page.substring(1);
  64.                 me.activeClass = me.containers.activeClass.substring(1);
  65.                 var pageHTML = "<ul class='" + pageClass + "'>";
  66.                 for (var i = 0; i < me.pagesCounts; i++) {
  67.                     pageHTML += "<li></li>";
  68.                 }
  69.                 pageHTML += "</ul>";
  70.                 me.element.append(pageHTML);
  71.                 var pages = me.element.find("ul" + me.containers.page);
  72.                 me.pageItem = pages.find("li");
  73.                 me.pageItem.eq(0).addClass(me.activeClass);
  74.             },
  75.             _initLayout : function () {
  76.                 var me = this;
  77.                 var width = (me.pagesCounts * 100) + "%";
  78.                 var cellWidth = (100 / me.pagesCounts).toFixed(2) + "%";
  79.                 //这里采用sections，因为使用transition的时候，就是使用sections的div进行相对位移的
  80.                 me.sections.width(width);
  81.                 me.section.width(cellWidth).addClass("left");
  82.             },
  83.             //加载事件监听器
  84.             _initEvent : function () {
  85.                 var me = this;
  86.                 //加载页码点击监听器
  87.                 if (me.pagination) {
  88.                     me.element.find(me.containers.page + " li").on("click", function () {
  89.                         me.activeIndex = $(this).index();
  90.                         me._scrollPage();
  91.                     });
  92.                 }
  93.                 //页面点击监听:点击页码产生下一页
  94.                 me.sections.on("click", function () {
  95.                     me._nextPage();
  96.                 });
  98.                 //设置鼠标滚轮事件
  99.                 me.element.on("mousewheel DOMMouseScroll", function (e) {
  100.                         var delta = e.originalEvent.wheelDelta || -e.originalEvent.wheelDelta;
  101.                         if (delta > 0 && (me.activeIndex && !me.settings.loop || me.settings.loop)) {
  102.                             me._prevPage();
  103.                         } else if (delta < 0 && (me.activeIndex < (me.pagesCount - 1) && !me.settings.loop || me.settings.loop)) {
  104.                             me._nextPage();
  105.                         }
  106.                     }
  107.                 );
  108.                 //设置键盘方向键事件
  109.                 if (me.settings.keyboard) {
  110.                     $(window).on("keypress", function (e) {
  111.                         var keyCode = e.keyCode;
  112.                         if (keyCode == 37 || keyCode == 38) {
  113.                             me._prevPage();
  114.                         } else if (keyCode == 39 || keyCode == 40) {
  115.                             me._nextPage();
  116.                         }
  117.                     });
  118.                 }
  119.                 //浏览器窗口大小改变触发的事件
  120.                 $(window).resize(function () {
  121.                         var currentLength = me.switchLength();
  122.                         var offset = me.settings.vertical ? me.section.eq(me.activeIndex).offset().top : me.section.eq(me.activeIndex).offset().left;
  123.                         if (Math.abs(offset) > currentLength / 2 && me.activeIndex < (me.pagesCounts - 1)) {
  124.                             me.activeIndex++;
  125.                         }
  126.                         if (me.activeIndex) {
  127.                             me._scrollPage();
  128.                         }
  129.                     }
  130.                 );
  131.                 //当动画Transition的css动画执行完毕后，调用该事件方法
  132.                 me.sections.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function () {
  133.                     me.canScroll = true;
  134.                     if (me.settings.onPageSwitch && $.type(me.settings.onPageSwitch) == "function") {
  135.                         me.settings.onPageSwitch();
  136.                     }
  137.                 })
  138.             },
  139.             //上一页
  140.             _prevPage : function () {
  141.                 var me = this;
  142.                 //在这里判断是否可以上一页（动画是否播放完毕）,在这里的原因是：如果不能进行上一页，则不做改变，activeIndex不会改变，
  143.                 //但如果在_scrollPage()方法里面判断，此时activeIndex已经改变,但如果scrollPanel为false，则下一次滚动会跳页
  144.                 if (me.canScroll) {
  145.                     if (me.activeIndex > 0) {
  146.                         me.activeIndex--;
  147.                     } else if (me.settings.loop) {
  148.                         me.activeIndex = me.pagesCounts - 1;
  149.                     }
  150.                     me._scrollPage();
  151.                 }
  152.             },
  153.             //上一页
  154.             _nextPage : function () {
  155.                 var me = this;
  156.                 if (me.canScroll) {
  157.                     if (me.activeIndex < me.pagesCounts - 1) {
  158.                         me.activeIndex++;
  159.                     } else if (me.settings.loop) {
  160.                         me.activeIndex = 0;
  161.                     }
  162.                     me._scrollPage();
  163.                 }
  164.             }
  165.             ,
  166.             //其实本质就是activeIndex被更改了，然后在这里修改相印的样式
  167.             _scrollPage : function () {
  168.                 var me = this;
  169.                 var activeFace = me.section.eq(me.activeIndex).position();
  170.                 if (!activeFace)return;
  171.                 me.canScroll = false;
  172.                 //拥有该样式
  173.                 if (_prefix) {
  174.                     me.sections.css(_prefix + "transition", "all " + me.settings.duration + "ms " + me.settings.easing);
  175.                     var translate = me.vertical ? "translateY(-" + activeFace.top + "px)" : "translateX(-" + activeFace.left + "px)";
  176.                     me.sections.css(_prefix + "transform", translate);
  177.                 } else {
  178.                     var animateCss = me.direction ? {top : -activeFace.top} : {left : -activeFace.left};
  179.                     me.sections.animate(animateCss, me.settings.duration, function () {
  180.                         me.canScroll = true;
  181.                         if (me.settings.onPageSwitch && $.type(me.settings.onPageSwitch) == "function") {
  182.                             me.settings.onPageSwitch();
  183.                         }
  184.                     })
  185.                 }
  186.                 if (me.settings.pagination) {
  187.                     me.pageItem.eq(me.activeIndex).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
  188.                 }
  189.             }
  190.         };
  191.         return PageSwitch;
  192.     })();
  193.     //把这个类作为一个函数闭包（插件）添加到jQuery中
  194.     $.fn.PageSwitch = function (options) {
  195.         console.log("start");
  196.         //对选中的jquery容器做一个循环，依次调用里面的元素
  197.         return this.each(function () {
  198.             var me = $(this);
  199.             var instance = me.data("PageSwitch");
  200.             if (!instance) {
  201.                 instance = new PageSwitch(me, options);
  202.                 me.data("PageSwitch", instance);
  203.             }
  204.             //如果传进来的不是对象而是字符串，则调用这个方法
  205.             if ($.type(options) === "string")return instance[options]();
  206.         })
  207.     };
  208.     //定义一个默认配置
  209.     $.fn.PageSwitch.defaults = {
  210.         containers : {
  211.             container : "#container",//容器
  212.             sections : ".sections",//第二层
  213.             section : ".section",//子节点层
  214.             intro : ".intro",//装载页面的内容
  215.             page : ".pages",//页码条ul
  216.             activeClass : ".active"//被激活的页码条
  217.         },
  218.         activeIndex : 0,//默认起始页面
  219.         easing : "ease-in-out",//特效方式，ease-in,ease-out,linear
  220.         duration : 1000,//每次动画执行的时间
  221.         pagination : true,//是否显示分页，右边中间的分页条
  222.         loop : true,//是否循环
  223.         keyboard : true,//是否支持键盘
  224.         vertical : true,//滑动方向，默认为true，或者false(horizontal)
  225.         onPageSwitch : ""//换页回调函数
  226.     };
  227.     $("#container").PageSwitch({
  228.         loop : true,
  229.         vertical : false
  231.     });
  233. })
  234. (jQuery);
  1. (function($){
  2.     var defaults = {
  3.         'container' : '#container',//容器
  4.         'sections' : '.section',//子容器
  5.         'easing' : 'ease',//特效方式，ease-in,ease-out,linear
  6.         'duration' : 1000,//每次动画执行的时间
  7.         'pagination' : true,//是否显示分页
  8.         'loop' : false,//是否循环
  9.         'keyboard' : true,//是否支持键盘
  10.         'direction' : 'vertical',//滑动的方向 horizontal,vertical,
  11.         'onpageSwitch' : function(pagenum){}
  12.     };
  14.     var win = $(window),
  15.         container,sections;
  17.     var opts = {},
  18.         canScroll = true;
  20.     var iIndex = 0;
  22.     var arrElement = [];
  24.     var SP = $.fn.switchPage = function(options){
  25. 		opts = $.extend({}, defaults , options||{});
  27.         container = $(opts.container),
  28.         sections = container.find(opts.sections);
  30.         sections.each(function(){
  31.             arrElement.push($(this));
  32.         });
  34.         return this.each(function(){
  35.             if(opts.direction == "horizontal"){
  36.             initLayout();
  37.             }
  39.             if(opts.pagination){
  40.                 initPagination();
  41.             }
  43.             if(opts.keyboard){
  44.                 keyDown();
  45.             }
  46.         });
  47.     }
  49.     //滚轮向上滑动事件
  50.     SP.moveSectionUp = function(){
  51.         if(iIndex){
  52.             iIndex--;
  53.         }else if(opts.loop){
  54.             iIndex = arrElement.length-1;
  55.         }
  56.         scrollPage(arrElement[iIndex]);
  57.     };
  59.     //滚轮向下滑动事件
  60.     SP.moveSectionDown = function(){
  61.         if(iIndex<(arrElement.length-1)){
  62.             iIndex++;
  63.         }else if(opts.loop){
  64.             iIndex = 0;
  65.         }
  66.         scrollPage(arrElement[iIndex]);
  67.     };
  69.     //私有方法
  70.     //页面滚动事件
  71.     function scrollPage(element){
  72.         var dest = element.position();
  73.         if(typeof dest === 'undefined'){ return; }
  74.         initEffects(dest,element);
  75.     }
  77.     //重写鼠标滑动事件
  78.     $(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
  79.     function MouseWheelHandler(e) {
  80.         e.preventDefault();
  81.         var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
  82.         var delta = Math.max(-1, Math.min(1, value));
  83.         if(canScroll){
  84.             if (delta < 0) {
  85.                 SP.moveSectionDown();
  86.             }else {
  87.                 SP.moveSectionUp();
  88.             }
  89.         }
  90.         return false;
  91.     }
  93.     //横向布局初始化
  94.     function initLayout(){
  95.         var length = sections.length,
  96.             width = (length*100)+"%",
  97.             cellWidth = (100/length).toFixed(2)+"%";
  98.         container.width(width).addClass("left");
  99.         sections.width(cellWidth).addClass("left");
  100.     }
  102.     //初始化分页
  103.     function initPagination(){
  104.         var length = sections.length;
  105.         if(length){
  107.         }
  108.         var pageHtml = '<ul id="pages"><li class="active"></li>';
  109.         for(var i=1;i<length;i++){
  110.             pageHtml += '<li></li>';
  111.         }
  112.         pageHtml += '</ul>';
  113.         $("body").append(pageHtml);
  114.     }
  116.     //分页事件
  117.     function paginationHandler(){
  118.         var pages = $("#pages li");
  119.         pages.eq(iIndex).addClass("active").siblings().removeClass("active");
  120.     }
  122.     //是否支持css的某个属性
  123.     function isSuportCss(property){
  124.         var body = $("body")[0];
  125.         for(var i=0; i<property.length;i++){
  126.             if(property[i] in body.style){
  127.                 return true;
  128.             }
  129.         }
  130.         return false;
  131.     }
  133.     //渲染效果
  134.     function initEffects(dest,element){
  135.         var transform = ["-webkit-transform","-ms-transform","-moz-transform","transform"],
  136.             transition = ["-webkit-transition","-ms-transition","-moz-transition","transition"];
  138.         canScroll = false;
  139.         if(isSuportCss(transform) && isSuportCss(transition)){
  140.             var traslate = "";
  141.             if(opts.direction == "horizontal"){
  142.                 traslate = "-"+dest.left+"px, 0px, 0px";
  143.             }else{
  144.                 traslate = "0px, -"+dest.top+"px, 0px";
  145.             }
  146.             container.css({
  147.                 "transition":"all "+opts.duration+"ms "+opts.easing,
  148.                 "transform":"translate3d("+traslate+")"
  149.             });
  150.             container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend",function(){
  151.                 canScroll = true;
  152.             });
  153.         }else{
  154.             var cssObj = (opts.direction == "horizontal")?{left: -dest.left}:{top: -dest.top};
  155.             container.animate(cssObj, opts.duration, function(){
  156.                 canScroll = true;
  157.             });
  158.         }
  159.         element.addClass("active").siblings().removeClass("active");
  160.         if(opts.pagination){
  161.             paginationHandler();
  162.         }
  163.     }
  165.     //窗口Resize
  166.     var resizeId;
  167.     win.resize(function(){
  168.         clearTimeout(resizeId);
  169.         resizeId = setTimeout(function(){
  170.             reBuild();
  171.         },500);
  172.     });
  174.     function reBuild(){
  175.         var currentHeight = win.height(),
  176.             currentWidth = win.width();
  178.         var element = arrElement[iIndex];
  179.         if(opts.direction == "horizontal"){
  180.             var offsetLeft = element.offset().left;
  181.             if(Math.abs(offsetLeft)>currentWidth/2 && iIndex <(arrElement.length-1)){
  182.                 iIndex ++;
  183.             }
  184.         }else{
  185.             var offsetTop = element.offset().top;
  186.             if(Math.abs(offsetTop)>currentHeight/2 && iIndex <(arrElement.length-1)){
  187.                 iIndex ++;
  188.             }
  189.         }
  190.         if(iIndex){
  191.             paginationHandler();
  192.             var cuerrentElement = arrElement[iIndex],
  193.                 dest = cuerrentElement.position();
  194.             initEffects(dest,cuerrentElement);
  195.         }
  196.     }
  198.     //绑定键盘事件
  199.     function keyDown(){
  200.         var keydownId;
  201.         win.keydown(function(e){
  202.             clearTimeout(keydownId);
  203.             keydownId = setTimeout(function(){
  204.                 var keyCode = e.keyCode;
  205.                 if(keyCode == 37||keyCode == 38){
  206.                     SP.moveSectionUp();
  207.                 }else if(keyCode == 39||keyCode == 40){
  208.                     SP.moveSectionDown();
  209.                 }
  210.             },150);
  211.         });
  212.     }
  213. })(jQuery);

附：参考

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注