zepto.fullpage.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. /*!
  2. * zepto.fullpage.js v0.5.0 (https://github.com/yanhaijing/zepto.fullpage)
  3. * API https://github.com/yanhaijing/zepto.fullpage/blob/master/doc/api.md
  4. * Copyright 2014 yanhaijing. All Rights Reserved
  5. * Licensed under MIT (https://github.com/yanhaijing/zepto.fullpage/blob/master/LICENSE)
  6. */
  7. (function($, window, undefined) {
  8. if (typeof $ === 'undefined') {
  9. throw new Error('zepto.fullpage\'s script requires Zepto');
  10. }
  11. var fullpage = null;
  12. var d = {
  13. page: '.page',
  14. start: 0,
  15. duration: 500,
  16. loop: false,
  17. drag: false,
  18. dir: 'v',
  19. der: 0.1,
  20. change: function(data) {},
  21. beforeChange: function(data) {},
  22. afterChange: function(data) {},
  23. orientationchange: function(orientation) {}
  24. };
  25. function touchmove(e) {
  26. e.preventDefault();
  27. }
  28. function fix(cur, pagesLength, loop) {
  29. if (cur < 0) {
  30. return !!loop ? pagesLength - 1 : 0;
  31. }
  32. if (cur >= pagesLength) {
  33. return !!loop ? 0 : pagesLength - 1;
  34. }
  35. return cur;
  36. }
  37. function move($ele, dir, dist) {
  38. var xPx = '0px', yPx = '0px';
  39. if(dir === 'v') yPx = dist + 'px';
  40. else xPx = dist + 'px';
  41. $ele.css({
  42. '-webkit-transform' : 'translate3d(' + xPx + ', ' + yPx + ', 0px);',
  43. 'transform' : 'translate3d(' + xPx + ', ' + yPx + ', 0px);'
  44. });
  45. }
  46. function Fullpage($this, option) {
  47. var o = $.extend(true, {}, d, option);
  48. this.$this = $this;
  49. this.curIndex = -1;
  50. this.o = o;
  51. this.startY = 0;
  52. this.movingFlag = false;
  53. this.$this.addClass('fullPage-wp');
  54. this.$parent = this.$this.parent();
  55. this.$pages = this.$this.find(o.page).addClass('fullPage-page fullPage-dir-' + o.dir);
  56. this.pagesLength = this.$pages.length;
  57. this.update();
  58. this.initEvent();
  59. this.start();
  60. }
  61. $.extend(Fullpage.prototype, {
  62. update: function() {
  63. if (this.o.dir === 'h') {
  64. this.width = this.$parent.width();
  65. this.$pages.width(this.width);
  66. this.$this.width(this.width * this.pagesLength);
  67. }
  68. this.height = this.$parent.height();
  69. this.$pages.height(this.height);
  70. this.moveTo(this.curIndex < 0 ? this.o.start : this.curIndex);
  71. },
  72. initEvent: function() {
  73. var that = this;
  74. var $this = this.$this;
  75. $this.on('touchstart', function(e) {
  76. if (!that.status) {return 1;}
  77. //e.preventDefault();
  78. if (that.movingFlag) {
  79. return 0;
  80. }
  81. that.startX = e.targetTouches[0].pageX;
  82. that.startY = e.targetTouches[0].pageY;
  83. });
  84. $this.on('touchend', function(e) {
  85. if (!that.status) {return 1;}
  86. //e.preventDefault();
  87. if (that.movingFlag) {
  88. return 0;
  89. }
  90. var sub = that.o.dir === 'v' ? (e.changedTouches[0].pageY - that.startY) / that.height : (e.changedTouches[0].pageX - that.startX) / that.width;
  91. var der = (sub > that.o.der || sub < -that.o.der) ? sub > 0 ? -1 : 1 : 0;
  92. that.moveTo(that.curIndex + der, true);
  93. });
  94. if (that.o.drag) {
  95. $this.on('touchmove', function(e) {
  96. if (!that.status) {return 1;}
  97. //e.preventDefault();
  98. if (that.movingFlag) {
  99. that.startX = e.targetTouches[0].pageX;
  100. that.startY = e.targetTouches[0].pageY;
  101. return 0;
  102. }
  103. var y = e.changedTouches[0].pageY - that.startY;
  104. if( (that.curIndex == 0 && y > 0) || (that.curIndex === that.pagesLength - 1 && y < 0) ) y /= 2;
  105. var x = e.changedTouches[0].pageX - that.startX;
  106. if( (that.curIndex == 0 && x > 0) || (that.curIndex === that.pagesLength - 1 && x < 0) ) x /= 2;
  107. var dist = (that.o.dir === 'v' ? (-that.curIndex * that.height + y) : (-that.curIndex * that.width + x));
  108. $this.removeClass('anim');
  109. move($this, that.o.dir, dist);
  110. });
  111. }
  112. // 翻转屏幕提示
  113. // ==============================
  114. window.addEventListener('orientationchange', function() {
  115. if (window.orientation === 180 || window.orientation === 0) {
  116. that.o.orientationchange('portrait');
  117. }
  118. if (window.orientation === 90 || window.orientation === -90) {
  119. that.o.orientationchange('landscape');
  120. }
  121. }, false);
  122. window.addEventListener('resize', function() {
  123. that.update();
  124. }, false);
  125. },
  126. holdTouch: function() {
  127. $(document).on('touchmove', touchmove);
  128. },
  129. unholdTouch: function() {
  130. $(document).off('touchmove', touchmove);
  131. },
  132. start: function() {
  133. this.status = 1;
  134. this.holdTouch();
  135. },
  136. stop: function() {
  137. this.status = 0;
  138. this.unholdTouch();
  139. },
  140. moveTo: function(next, anim) {
  141. var that = this;
  142. var $this = this.$this;
  143. var cur = this.curIndex;
  144. next = fix(next, this.pagesLength, this.o.loop);
  145. if (anim) {
  146. $this.addClass('anim');
  147. } else {
  148. $this.removeClass('anim');
  149. }
  150. if (next !== cur) {
  151. var flag = this.o.beforeChange({
  152. next: next,
  153. cur: cur
  154. });
  155. // beforeChange 显示返回false 可阻止滚屏的发生
  156. if (flag === false) {
  157. return 1;
  158. }
  159. }
  160. this.movingFlag = true;
  161. this.curIndex = next;
  162. move($this, this.o.dir, -next * (this.o.dir === 'v' ? this.height : this.width));
  163. if (next !== cur) {
  164. this.o.change({
  165. prev: cur,
  166. cur: next
  167. });
  168. }
  169. window.setTimeout(function() {
  170. that.movingFlag = false;
  171. if (next !== cur) {
  172. that.o.afterChange({
  173. prev: cur,
  174. cur: next
  175. });
  176. that.$pages.removeClass('cur').eq(next).addClass('cur');
  177. }
  178. }, that.o.duration);
  179. return 0;
  180. },
  181. movePrev: function(anim) {
  182. this.moveTo(this.curIndex - 1, anim);
  183. },
  184. moveNext: function(anim) {
  185. this.moveTo(this.curIndex + 1, anim);
  186. },
  187. getCurIndex: function () {
  188. return this.curIndex;
  189. }
  190. });
  191. $.fn.fullpage = function(option) {
  192. if (!fullpage) {
  193. fullpage = new Fullpage($(this), option);
  194. }
  195. return this;
  196. };
  197. $.fn.fullpage.version = '0.5.0';
  198. //暴露方法
  199. $.each(['update', 'moveTo', 'moveNext', 'movePrev', 'start', 'stop', 'getCurIndex', 'holdTouch', 'unholdTouch'], function(key, val) {
  200. $.fn.fullpage[val] = function() {
  201. if (!fullpage) {
  202. return 0;
  203. }
  204. return fullpage[val].apply(fullpage, arguments);
  205. };
  206. });
  207. }(Zepto, window));