123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- /*!
- * zepto.fullpage.js v0.5.0 (https://github.com/yanhaijing/zepto.fullpage)
- * API https://github.com/yanhaijing/zepto.fullpage/blob/master/doc/api.md
- * Copyright 2014 yanhaijing. All Rights Reserved
- * Licensed under MIT (https://github.com/yanhaijing/zepto.fullpage/blob/master/LICENSE)
- */
- (function($, window, undefined) {
- if (typeof $ === 'undefined') {
- throw new Error('zepto.fullpage\'s script requires Zepto');
- }
- var fullpage = null;
- var d = {
- page: '.page',
- start: 0,
- duration: 500,
- loop: false,
- drag: false,
- dir: 'v',
- der: 0.1,
- change: function(data) {},
- beforeChange: function(data) {},
- afterChange: function(data) {},
- orientationchange: function(orientation) {}
- };
- function touchmove(e) {
- e.preventDefault();
- }
-
- function fix(cur, pagesLength, loop) {
- if (cur < 0) {
- return !!loop ? pagesLength - 1 : 0;
- }
- if (cur >= pagesLength) {
- return !!loop ? 0 : pagesLength - 1;
- }
- return cur;
- }
- function move($ele, dir, dist) {
- var xPx = '0px', yPx = '0px';
- if(dir === 'v') yPx = dist + 'px';
- else xPx = dist + 'px';
- $ele.css({
- '-webkit-transform' : 'translate3d(' + xPx + ', ' + yPx + ', 0px);',
- 'transform' : 'translate3d(' + xPx + ', ' + yPx + ', 0px);'
- });
- }
- function Fullpage($this, option) {
- var o = $.extend(true, {}, d, option);
- this.$this = $this;
- this.curIndex = -1;
- this.o = o;
- this.startY = 0;
- this.movingFlag = false;
- this.$this.addClass('fullPage-wp');
- this.$parent = this.$this.parent();
- this.$pages = this.$this.find(o.page).addClass('fullPage-page fullPage-dir-' + o.dir);
- this.pagesLength = this.$pages.length;
- this.update();
- this.initEvent();
- this.start();
- }
- $.extend(Fullpage.prototype, {
- update: function() {
- if (this.o.dir === 'h') {
- this.width = this.$parent.width();
- this.$pages.width(this.width);
- this.$this.width(this.width * this.pagesLength);
- }
- this.height = this.$parent.height();
- this.$pages.height(this.height);
- this.moveTo(this.curIndex < 0 ? this.o.start : this.curIndex);
- },
- initEvent: function() {
- var that = this;
- var $this = this.$this;
- $this.on('touchstart', function(e) {
- if (!that.status) {return 1;}
- //e.preventDefault();
- if (that.movingFlag) {
- return 0;
- }
- that.startX = e.targetTouches[0].pageX;
- that.startY = e.targetTouches[0].pageY;
- });
- $this.on('touchend', function(e) {
- if (!that.status) {return 1;}
- //e.preventDefault();
- if (that.movingFlag) {
- return 0;
- }
- var sub = that.o.dir === 'v' ? (e.changedTouches[0].pageY - that.startY) / that.height : (e.changedTouches[0].pageX - that.startX) / that.width;
- var der = (sub > that.o.der || sub < -that.o.der) ? sub > 0 ? -1 : 1 : 0;
- that.moveTo(that.curIndex + der, true);
- });
- if (that.o.drag) {
- $this.on('touchmove', function(e) {
- if (!that.status) {return 1;}
- //e.preventDefault();
- if (that.movingFlag) {
- that.startX = e.targetTouches[0].pageX;
- that.startY = e.targetTouches[0].pageY;
- return 0;
- }
- var y = e.changedTouches[0].pageY - that.startY;
- if( (that.curIndex == 0 && y > 0) || (that.curIndex === that.pagesLength - 1 && y < 0) ) y /= 2;
- var x = e.changedTouches[0].pageX - that.startX;
- if( (that.curIndex == 0 && x > 0) || (that.curIndex === that.pagesLength - 1 && x < 0) ) x /= 2;
- var dist = (that.o.dir === 'v' ? (-that.curIndex * that.height + y) : (-that.curIndex * that.width + x));
- $this.removeClass('anim');
- move($this, that.o.dir, dist);
- });
- }
- // 翻转屏幕提示
- // ==============================
- window.addEventListener('orientationchange', function() {
- if (window.orientation === 180 || window.orientation === 0) {
- that.o.orientationchange('portrait');
- }
- if (window.orientation === 90 || window.orientation === -90) {
- that.o.orientationchange('landscape');
- }
- }, false);
- window.addEventListener('resize', function() {
- that.update();
- }, false);
- },
- holdTouch: function() {
- $(document).on('touchmove', touchmove);
- },
- unholdTouch: function() {
- $(document).off('touchmove', touchmove);
- },
- start: function() {
- this.status = 1;
- this.holdTouch();
- },
- stop: function() {
- this.status = 0;
- this.unholdTouch();
- },
- moveTo: function(next, anim) {
- var that = this;
- var $this = this.$this;
- var cur = this.curIndex;
- next = fix(next, this.pagesLength, this.o.loop);
- if (anim) {
- $this.addClass('anim');
- } else {
- $this.removeClass('anim');
- }
- if (next !== cur) {
- var flag = this.o.beforeChange({
- next: next,
- cur: cur
- });
- // beforeChange 显示返回false 可阻止滚屏的发生
- if (flag === false) {
- return 1;
- }
- }
- this.movingFlag = true;
- this.curIndex = next;
- move($this, this.o.dir, -next * (this.o.dir === 'v' ? this.height : this.width));
- if (next !== cur) {
- this.o.change({
- prev: cur,
- cur: next
- });
- }
- window.setTimeout(function() {
- that.movingFlag = false;
- if (next !== cur) {
- that.o.afterChange({
- prev: cur,
- cur: next
- });
- that.$pages.removeClass('cur').eq(next).addClass('cur');
- }
- }, that.o.duration);
- return 0;
- },
- movePrev: function(anim) {
- this.moveTo(this.curIndex - 1, anim);
- },
- moveNext: function(anim) {
- this.moveTo(this.curIndex + 1, anim);
- },
- getCurIndex: function () {
- return this.curIndex;
- }
- });
- $.fn.fullpage = function(option) {
- if (!fullpage) {
- fullpage = new Fullpage($(this), option);
- }
- return this;
- };
- $.fn.fullpage.version = '0.5.0';
- //暴露方法
- $.each(['update', 'moveTo', 'moveNext', 'movePrev', 'start', 'stop', 'getCurIndex', 'holdTouch', 'unholdTouch'], function(key, val) {
- $.fn.fullpage[val] = function() {
- if (!fullpage) {
- return 0;
- }
- return fullpage[val].apply(fullpage, arguments);
- };
- });
- }(Zepto, window));
|