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

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

附:参考

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