博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flipsnap.js 源码阅读备份
阅读量:5086 次
发布时间:2019-06-13

本文共 27275 字,大约阅读时间需要 90 分钟。

这是官网:

 

1.引入全局命名空间 类似jQuery插件写法   传入window, document,提高内部访问速度;

;(function(window, document, undefined){})(window, window.document)
 

2.定义全局变量

/* 新建div节点 */var div = document.createElement('div');/* 浏览器前缀 */var prefix = ['webkit', 'moz', 'o', 'ms'];/* 存储属性对象 */var saveProp = {};/* 检测浏览器支持的对象 */var support = Flipsnap.support = {};/* 手势状态判断 */var gestureStart = false;/* 阀值设置 */var DISTANCE_THRESHOLD = 5;var ANGLE_THREHOLD = 55;
 

3.分别检测对transform3d, transform及trasition 3个css3属性的支持程度

support.transform3d = hasProp([  'perspectiveProperty',  'WebkitPerspective',  'MozPerspective',  'OPerspective',  'msPerspective']);support.transform = hasProp([  'transformProperty',  'WebkitTransform',  'MozTransform',  'OTransform',  'msTransform']);support.transition = hasProp([  'transitionProperty',  'WebkitTransitionProperty',  'MozTransitionProperty',  'OTransitionProperty',  'msTransitionProperty']);

 

使用hasProp()函数

function hasProp(props) {  return some(props, function(prop) {    return div.style[ prop ] !== undefined;  });}

 

其中some()闭包函数##为,只要数组内其中一个为true即判定为true

function some(ary, callback) {  for (var i = 0, len = ary.length; i < len; i++) {    if (callback(ary[i], i)) {      return true;    }  }  return false;}
 

4.其他浏览器的属性支持(事件监听属性及IE的指针事件的支持)及总的css动画属性支持判断

support.addEventListener = 'addEventListener' in window;support.mspointer = window.navigator.msPointerEnabled;support.cssAnimation = (support.transform3d || support.transform) && support.transition;

 

5.定义事件种类及相关事件对象

var eventTypes = ['touch', 'mouse'];var events = {  start: {    touch: 'touchstart',    mouse: 'mousedown'  },  move: {    touch: 'touchmove',    mouse: 'mousemove'  },  end: {    touch: 'touchend',    mouse: 'mouseup'  }};

 

6.添加事件监听

if (support.addEventListener) {  document.addEventListener('gesturestart', function() {    gestureStart = true;  });  document.addEventListener('gestureend', function() {    gestureStart = false;  });}

 

7.定义全局新类Flipsnap(),并初始化新类,其中使用了Flipsnap类的初始方法init()

function Flipsnap(element, opts) {  return (this instanceof Flipsnap)    ? this.init(element, opts)    : new Flipsnap(element, opts);}

 

8.定义Flipsnap类的初始化方法init()

Flipsnap.prototype.init = function(element, opts) {  var self = this;  // set element  self.element = element;  if (typeof element === 'string') {    self.element = document.querySelector(element);  }  if (!self.element) {    throw new Error('element not found');  }  if (support.mspointer) {    self.element.style.msTouchAction = 'pan-y';  }  // set opts  opts = opts || {};  self.distance = opts.distance;  self.maxPoint = opts.maxPoint;  self.disableTouch = (opts.disableTouch === undefined) ? false : opts.disableTouch;  self.disable3d = (opts.disable3d === undefined) ? false : opts.disable3d;  self.transitionDuration = (opts.transitionDuration === undefined) ? '350ms' : opts.transitionDuration + 'ms';  self.threshold = opts.threshold || 0;  // set property  self.currentPoint = 0;  self.currentX = 0;  self.animation = false;  self.use3d = support.transform3d;  if (self.disable3d === true) {    self.use3d = false;  }  // set default style  if (support.cssAnimation) {    self._setStyle({      transitionProperty: getCSSVal('transform'),      transitionTimingFunction: 'cubic-bezier(0,0,0.25,1)',      transitionDuration: '0ms',      transform: self._getTranslate(0)    });  }  else {    self._setStyle({      position: 'relative',      left: '0px'    });  }  // initilize  self.refresh();  eventTypes.forEach(function(type) {    // 为什么要传人self作回调函数,(self=Flipsnap())?    self.element.addEventListener(events.start[type], self, false);  });  return self;};

 

 

其中_setStyle()为FLipsnap的内部方法

Flipsnap.prototype._setStyle = function(styles) {  var self = this;  var style = self.element.style;  for (var prop in styles) {    setStyle(style, prop, styles[prop]);  }};

 

其中setStyle()函数,设置对应css属性为对应值,具体为

function setStyle(style, prop, val) {  var _saveProp = saveProp[ prop ];  if (_saveProp) {    style[ _saveProp ] = val;  }  else if (style[ prop ] !== undefined) {    saveProp[ prop ] = prop;    style[ prop ] = val;  }  else {    some(prefix, function(_prefix) {      var _prop = ucFirst(_prefix) + ucFirst(prop);      if (style[ _prop ] !== undefined) {        saveProp[ prop ] = _prop;        style[ _prop ] = val;        return true;      }    });  }}

并在saveProp中设置过的属性

getCSSVal()函数用于获取已用的css属性值,具体如下

function getCSSVal(prop) {  if (div.style[ prop ] !== undefined) {    return prop;  }  else {    var ret;    some(prefix, function(_prefix) {      var _prop = ucFirst(_prefix) + ucFirst(prop);      if (div.style[ _prop ] !== undefined) {        ret = '-' + _prefix + '-' + prop;        return true;      }    });    return ret;  }}

 

ucFirst()函数用于将首字母变大写,具体如下 截取第一个字符串charAt(0)转为大写 拼接后面剩下的字符串(substr(1))

function ucFirst(str) {  return str.charAt(0).toUpperCase() + str.substr(1);}
 

self._getTranslate为Flipsnap的内部方法

Flipsnap.prototype._getTranslate = function(x) {  var self = this;  return self.use3d    ? 'translate3d(' + x + 'px, 0, 0)'    : 'translate(' + x + 'px, 0)';};

 

refresh()的Flipsnap方法,具体如下

Flipsnap.prototype.refresh = function() {  var self = this;  // setting max point  self._maxPoint = (self.maxPoint === undefined) ? (function() {    var childNodes = self.element.childNodes,      itemLength = -1,      i = 0,      len = childNodes.length,      node;    for(; i < len; i++) {      node = childNodes[i];      if (node.nodeType === 1) {        itemLength++;      }    }    return itemLength;  })() : self.maxPoint;  // setting distance  if (self.distance === undefined) {    if (self._maxPoint < 0) {      self._distance = 0;    }    else {      self._distance = self.element.scrollWidth / (self._maxPoint + 1);    }  }  else {    self._distance = self.distance;  }  // setting maxX  self._maxX = -self._distance * self._maxPoint;  self.moveToPoint();};

 

通过refresh方法设定_maxPoint(最多移动次数)、_distance(移动距离)和_maxX(最大x轴偏向值)属性,从而控制最多的滑动次数;

moveToPoint()的Flipsnap方法,判定是否需要滑动并触发事件,具体如下

Flipsnap.prototype.moveToPoint = function(point, transitionDuration) {  var self = this;  transitionDuration = transitionDuration === undefined    ? self.transitionDuration : transitionDuration + 'ms';  var beforePoint = self.currentPoint;  // not called from `refresh()`  if (point === undefined) {    point = self.currentPoint;  }  if (point < 0) {    self.currentPoint = 0;  }  else if (point > self._maxPoint) {    self.currentPoint = self._maxPoint;  }  else {    self.currentPoint = parseInt(point, 10);  }  if (support.cssAnimation) {    self._setStyle({ transitionDuration: transitionDuration });  }  else {    self.animation = true;  }  self._setX(- self.currentPoint * self._distance, transitionDuration);  if (beforePoint !== self.currentPoint) { // is move?    // `fsmoveend` is deprecated    // `fspointmove` is recommend.    self._triggerEvent('fsmoveend', true, false);    self._triggerEvent('fspointmove', true, false);  }};

 

其中_setX()为Flipsnap的内部方法,具体如下

Flipsnap.prototype._setX = function(x, transitionDuration) {  var self = this;  self.currentX = x;  if (support.cssAnimation) {    self.element.style[ saveProp.transform ] = self._getTranslate(x);  }  else {    if (self.animation) {      self._animate(x, transitionDuration || self.transitionDuration);    }    else {      self.element.style.left = x + 'px';    }  }};

其中_animate()为Flipsnap的内部方法,具体如下

 

Flipsnap.prototype._animate = function(x, transitionDuration) {  var self = this;  var elem = self.element;  var begin = +new Date();  var from = parseInt(elem.style.left, 10);  var to = x;  var duration = parseInt(transitionDuration, 10);  var easing = function(time, duration) {    return -(time /= duration) * (time - 2);  };  var timer = setInterval(function() {    var time = new Date() - begin;    var pos, now;    if (time > duration) {      clearInterval(timer);      now = to;    }    else {      pos = easing(time, duration);      now = pos * (to - from) + from;    }    elem.style.left = now + "px";  }, 10);};

 

 

其中_triggerEvent() 为Flipsnap的内部方法,具体如下

Flipsnap.prototype._triggerEvent = function(type, bubbles, cancelable, data) {  var self = this;  var ev = document.createEvent('Event');  ev.initEvent(type, bubbles, cancelable);  if (data) {    for (var d in data) {      if (data.hasOwnProperty(d)) {        ev[d] = data[d];      }    }  }  return self.element.dispatchEvent(ev);};

 

9.定义Flipsnap类的事件控制方法handleEvent()

Flipsnap.prototype.handleEvent = function(event) {  var self = this;  switch (event.type) {    // start    case events.start.touch: self._touchStart(event, 'touch'); break;    case events.start.mouse: self._touchStart(event, 'mouse'); break;    // move    case events.move.touch: self._touchMove(event, 'touch'); break;    case events.move.mouse: self._touchMove(event, 'mouse'); break;    // end    case events.end.touch: self._touchEnd(event, 'touch'); break;    case events.end.mouse: self._touchEnd(event, 'mouse'); break;    // click    case 'click': self._click(event); break;  }};

 

通过event.type进行条件判断,确定执行Flipsnap的四个内部处理方法中的一个

 

_touchStart()方法

Flipsnap.prototype._touchStart = function(event, type) {  var self = this;  if (self.disableTouch || self.scrolling || gestureStart) {    return;  }  self.element.addEventListener(events.move[type], self, false);  document.addEventListener(events.end[type], self, false);  var tagName = event.target.tagName;  if (type === 'mouse' && tagName !== 'SELECT' && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'BUTTON') {    event.preventDefault();  }  if (support.cssAnimation) {    self._setStyle({ transitionDuration: '0ms' });  }  else {    self.animation = false;  }  self.scrolling = true;  self.moveReady = false;  self.startPageX = getPage(event, 'pageX');  self.startPageY = getPage(event, 'pageY');  self.basePageX = self.startPageX;  self.directionX = 0;  self.startTime = event.timeStamp;  self._triggerEvent('fstouchstart', true, false);};

通过touchStart方法记录下触摸开始点开始时间等参数,并触发fstouchstart事件;

 

getPage()函数如下

 

function getPage(event, page) {  return event.changedTouches ? event.changedTouches[0][page] : event[page];}

 

_touchMove()方法如下

Flipsnap.prototype._touchMove = function(event, type) {  var self = this;  if (!self.scrolling || gestureStart) {    return;  }  var pageX = getPage(event, 'pageX');  var pageY = getPage(event, 'pageY');  var distX;  var newX;  if (self.moveReady) {    event.preventDefault();    distX = pageX - self.basePageX;    newX = self.currentX + distX;    if (newX >= 0 || newX < self._maxX) {      newX = Math.round(self.currentX + distX / 3);    }    // When distX is 0, use one previous value.    // For android firefox. When touchend fired, touchmove also    // fired and distX is certainly set to 0.     self.directionX =      distX === 0 ? self.directionX :      distX > 0 ? -1 : 1;    // if they prevent us then stop it    var isPrevent = !self._triggerEvent('fstouchmove', true, true, {      delta: distX,      direction: self.directionX    });    if (isPrevent) {      self._touchAfter({        moved: false,        originalPoint: self.currentPoint,        newPoint: self.currentPoint,        cancelled: true      });    } else {      self._setX(newX);    }  }  else {    // https://github.com/pxgrid/js-flipsnap/pull/36    var triangle = getTriangleSide(self.startPageX, self.startPageY, pageX, pageY);    if (triangle.z > DISTANCE_THRESHOLD) {      if (getAngle(triangle) > ANGLE_THREHOLD) {        event.preventDefault();        self.moveReady = true;        self.element.addEventListener('click', self, true);      }      else {        self.scrolling = false;      }    }  }  self.basePageX = pageX;};

 

 

其中getTriangleSide()函数如下

function getTriangleSide(x1, y1, x2, y2) {  var x = Math.abs(x1 - x2);  var y = Math.abs(y1 - y2);  var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));  return {    x: x,    y: y,    z: z  };}

 

其中getAngle()函数如下

function getAngle(triangle) {  var cos = triangle.y / triangle.z;  var radina = Math.acos(cos);  return 180 / (Math.PI / radina);}

 

_touchEnd()方法如下

 

Flipsnap.prototype._touchEnd = function(event, type) {  var self = this;  self.element.removeEventListener(events.move[type], self, false);  document.removeEventListener(events.end[type], self, false);  if (!self.scrolling) {    return;  }  var newPoint = -self.currentX / self._distance;  newPoint =    (self.directionX > 0) ? Math.ceil(newPoint) :    (self.directionX < 0) ? Math.floor(newPoint) :    Math.round(newPoint);  if (newPoint < 0) {    newPoint = 0;  }  else if (newPoint > self._maxPoint) {    newPoint = self._maxPoint;  }  if (Math.abs(self.startPageX - self.basePageX) < self.threshold) {    newPoint = self.currentPoint;  }  self._touchAfter({    moved: newPoint !== self.currentPoint,    originalPoint: self.currentPoint,    newPoint: newPoint,    cancelled: false  });  self.moveToPoint(newPoint);};

 

触发fstouchend事件

其中_touchAfter()方法如下

Flipsnap.prototype._touchAfter = function(params) {  var self = this;  self.scrolling = false;  self.moveReady = false;  setTimeout(function() {    self.element.removeEventListener('click', self, true);  }, 200);  self._triggerEvent('fstouchend', true, false, params);};

_clic()方法如下

Flipsnap.prototype._click = function(event) {  var self = this;  event.stopPropagation();  event.preventDefault();};

 

10.定义Flipsnap类的状态判断方法hasNext()

 

Flipsnap.prototype.hasNext = function() {  var self = this;  return self.currentPoint < self._maxPoint;};

 

11.定义Flipsnap类的状态判断方法hasPrev()

Flipsnap.prototype.hasPrev = function() {  var self = this;  return self.currentPoint > 0;};

12.定义Flipsnap类的跳转下一个方法toNext()

Flipsnap.prototype.toNext = function(transitionDuration) {  var self = this;  if (!self.hasNext()) {    return;  }  self.moveToPoint(self.currentPoint + 1, transitionDuration);};

 

13.定义Flipsnap类的跳转上一个方法toPrev()

Flipsnap.prototype.toPrev = function(transitionDuration) {  var self = this;  if (!self.hasPrev()) {    return;  }  self.moveToPoint(self.currentPoint - 1, transitionDuration);};

 

14.定义Flipsnap类的跳转上一个方法destroy()

 

Flipsnap.prototype.destroy = function() {  var self = this;  eventTypes.forEach(function(type) {    self.element.removeEventListener(events.start[type], self, false);  });};

 

取消在各个节点上的事件监听

15.将Flipsnap模块化

if (typeof exports == 'object') {  module.exports = Flipsnap;}else if (typeof define == 'function' && define.amd) {  define(function() {    return Flipsnap;  });}else {  window.Flipsnap = Flipsnap;}
/** * flipsnap.js * * @version  0.6.2 * @url http://hokaccha.github.com/js-flipsnap/ * * Copyright 2011 PixelGrid, Inc. * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */(function(window, document, undefined) {var div = document.createElement('div');var prefix = ['webkit', 'moz', 'o', 'ms'];var saveProp = {};var support = Flipsnap.support = {};var gestureStart = false;var DISTANCE_THRESHOLD = 5;var ANGLE_THREHOLD = 55;support.transform3d = hasProp([  'perspectiveProperty',  'WebkitPerspective',  'MozPerspective',  'OPerspective',  'msPerspective']);support.transform = hasProp([  'transformProperty',  'WebkitTransform',  'MozTransform',  'OTransform',  'msTransform']);support.transition = hasProp([  'transitionProperty',  'WebkitTransitionProperty',  'MozTransitionProperty',  'OTransitionProperty',  'msTransitionProperty']);support.addEventListener = 'addEventListener' in window;support.mspointer = window.navigator.msPointerEnabled;support.cssAnimation = (support.transform3d || support.transform) && support.transition;var eventTypes = ['touch', 'mouse'];var events = {  start: {    touch: 'touchstart',    mouse: 'mousedown'  },  move: {    touch: 'touchmove',    mouse: 'mousemove'  },  end: {    touch: 'touchend',    mouse: 'mouseup'  }};if (support.addEventListener) {  document.addEventListener('gesturestart', function() {    gestureStart = true;  });  document.addEventListener('gestureend', function() {    gestureStart = false;  });}function Flipsnap(element, opts) {  return (this instanceof Flipsnap)    ? this.init(element, opts)    : new Flipsnap(element, opts);}Flipsnap.prototype.init = function(element, opts) {  var self = this;  // set element  self.element = element;  if (typeof element === 'string') {    self.element = document.querySelector(element);  }  if (!self.element) {    throw new Error('element not found');  }  if (support.mspointer) {    self.element.style.msTouchAction = 'pan-y';  }  // set opts  opts = opts || {};  self.distance = opts.distance;  self.maxPoint = opts.maxPoint;  self.disableTouch = (opts.disableTouch === undefined) ? false : opts.disableTouch;  self.disable3d = (opts.disable3d === undefined) ? false : opts.disable3d;  self.transitionDuration = (opts.transitionDuration === undefined) ? '350ms' : opts.transitionDuration + 'ms';  // set property  self.currentPoint = 0;  self.currentX = 0;  self.animation = false;  self.use3d = support.transform3d;  if (self.disable3d === true) {    self.use3d = false;  }  // set default style  if (support.cssAnimation) {    self._setStyle({      transitionProperty: getCSSVal('transform'),      transitionTimingFunction: 'cubic-bezier(0,0,0.25,1)',      transitionDuration: '0ms',      transform: self._getTranslate(0)    });  }  else {    self._setStyle({      position: 'relative',      left: '0px'    });  }  // initilize  self.refresh();  eventTypes.forEach(function(type) {    self.element.addEventListener(events.start[type], self, false);  });  return self;};Flipsnap.prototype.handleEvent = function(event) {  var self = this;  switch (event.type) {    // start    case events.start.touch: self._touchStart(event, 'touch'); break;    case events.start.mouse: self._touchStart(event, 'mouse'); break;    // move    case events.move.touch: self._touchMove(event, 'touch'); break;    case events.move.mouse: self._touchMove(event, 'mouse'); break;    // end    case events.end.touch: self._touchEnd(event, 'touch'); break;    case events.end.mouse: self._touchEnd(event, 'mouse'); break;    // click    case 'click': self._click(event); break;  }};Flipsnap.prototype.refresh = function() {  var self = this;  // setting max point  self._maxPoint = (self.maxPoint === undefined) ? (function() {    var childNodes = self.element.childNodes,      itemLength = -1,      i = 0,      len = childNodes.length,      node;    for(; i < len; i++) {      node = childNodes[i];      if (node.nodeType === 1) {        itemLength++;      }    }    return itemLength;  })() : self.maxPoint;  // setting distance  if (self.distance === undefined) {    if (self._maxPoint < 0) {      self._distance = 0;    }    else {      self._distance = self.element.scrollWidth / (self._maxPoint + 1);    }  }  else {    self._distance = self.distance;  }  // setting maxX  self._maxX = -self._distance * self._maxPoint;  self.moveToPoint();};Flipsnap.prototype.hasNext = function() {  var self = this;  return self.currentPoint < self._maxPoint;};Flipsnap.prototype.hasPrev = function() {  var self = this;  return self.currentPoint > 0;};Flipsnap.prototype.toNext = function(transitionDuration) {  var self = this;  if (!self.hasNext()) {    return;  }  self.moveToPoint(self.currentPoint + 1, transitionDuration);};Flipsnap.prototype.toPrev = function(transitionDuration) {  var self = this;  if (!self.hasPrev()) {    return;  }  self.moveToPoint(self.currentPoint - 1, transitionDuration);};Flipsnap.prototype.moveToPoint = function(point, transitionDuration) {  var self = this;    transitionDuration = transitionDuration === undefined    ? self.transitionDuration : transitionDuration + 'ms';  var beforePoint = self.currentPoint;  // not called from `refresh()`  if (point === undefined) {    point = self.currentPoint;  }  if (point < 0) {    self.currentPoint = 0;  }  else if (point > self._maxPoint) {    self.currentPoint = self._maxPoint;  }  else {    self.currentPoint = parseInt(point, 10);  }  if (support.cssAnimation) {    self._setStyle({ transitionDuration: transitionDuration });  }  else {    self.animation = true;  }  self._setX(- self.currentPoint * self._distance, transitionDuration);  if (beforePoint !== self.currentPoint) { // is move?    // `fsmoveend` is deprecated    // `fspointmove` is recommend.    self._triggerEvent('fsmoveend', true, false);    self._triggerEvent('fspointmove', true, false);  }};Flipsnap.prototype._setX = function(x, transitionDuration) {  var self = this;  self.currentX = x;  if (support.cssAnimation) {    self.element.style[ saveProp.transform ] = self._getTranslate(x);  }  else {    if (self.animation) {      self._animate(x, transitionDuration || self.transitionDuration);    }    else {      self.element.style.left = x + 'px';    }  }};Flipsnap.prototype._touchStart = function(event, type) {  var self = this;  if (self.disableTouch || self.scrolling || gestureStart) {    return;  }  self.element.addEventListener(events.move[type], self, false);  document.addEventListener(events.end[type], self, false);  var tagName = event.target.tagName;  if (type === 'mouse' && tagName !== 'SELECT' && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'BUTTON') {    event.preventDefault();  }  if (support.cssAnimation) {    self._setStyle({ transitionDuration: '0ms' });  }  else {    self.animation = false;  }  self.scrolling = true;  self.moveReady = false;  self.startPageX = getPage(event, 'pageX');  self.startPageY = getPage(event, 'pageY');  self.basePageX = self.startPageX;  self.directionX = 0;  self.startTime = event.timeStamp;  self._triggerEvent('fstouchstart', true, false);};Flipsnap.prototype._touchMove = function(event, type) {  var self = this;  if (!self.scrolling || gestureStart) {    return;  }  var pageX = getPage(event, 'pageX');  var pageY = getPage(event, 'pageY');  var distX;  var newX;  if (self.moveReady) {    event.preventDefault();    distX = pageX - self.basePageX;    newX = self.currentX + distX;    if (newX >= 0 || newX < self._maxX) {      newX = Math.round(self.currentX + distX / 3);    }    // When distX is 0, use one previous value.    // For android firefox. When touchend fired, touchmove also    // fired and distX is certainly set to 0.     self.directionX =      distX === 0 ? self.directionX :      distX > 0 ? -1 : 1;    // if they prevent us then stop it    var isPrevent = !self._triggerEvent('fstouchmove', true, true, {      delta: distX,      direction: self.directionX    });    if (isPrevent) {      self._touchAfter({        moved: false,        originalPoint: self.currentPoint,        newPoint: self.currentPoint,        cancelled: true      });    } else {      self._setX(newX);    }  }  else {    // https://github.com/hokaccha/js-flipsnap/pull/36    var triangle = getTriangleSide(self.startPageX, self.startPageY, pageX, pageY);    if (triangle.z > DISTANCE_THRESHOLD) {      if (getAngle(triangle) > ANGLE_THREHOLD) {        event.preventDefault();        self.moveReady = true;        self.element.addEventListener('click', self, true);      }      else {        self.scrolling = false;      }    }  }  self.basePageX = pageX;};Flipsnap.prototype._touchEnd = function(event, type) {  var self = this;  self.element.removeEventListener(events.move[type], self, false);  document.removeEventListener(events.end[type], self, false);  if (!self.scrolling) {    return;  }  var newPoint = -self.currentX / self._distance;  newPoint =    (self.directionX > 0) ? Math.ceil(newPoint) :    (self.directionX < 0) ? Math.floor(newPoint) :    Math.round(newPoint);  if (newPoint < 0) {    newPoint = 0;  }  else if (newPoint > self._maxPoint) {    newPoint = self._maxPoint;  }  self._touchAfter({    moved: newPoint !== self.currentPoint,    originalPoint: self.currentPoint,    newPoint: newPoint,    cancelled: false  });  self.moveToPoint(newPoint);};Flipsnap.prototype._click = function(event) {  var self = this;  event.stopPropagation();  event.preventDefault();};Flipsnap.prototype._touchAfter = function(params) {  var self = this;  self.scrolling = false;  self.moveReady = false;  setTimeout(function() {    self.element.removeEventListener('click', self, true);  }, 200);  self._triggerEvent('fstouchend', true, false, params);};Flipsnap.prototype._setStyle = function(styles) {  var self = this;  var style = self.element.style;  for (var prop in styles) {    setStyle(style, prop, styles[prop]);  }};Flipsnap.prototype._animate = function(x, transitionDuration) {  var self = this;  var elem = self.element;  var begin = +new Date();  var from = parseInt(elem.style.left, 10);  var to = x;  var duration = parseInt(transitionDuration, 10);  var easing = function(time, duration) {    return -(time /= duration) * (time - 2);  };  var timer = setInterval(function() {    var time = new Date() - begin;    var pos, now;    if (time > duration) {      clearInterval(timer);      now = to;    }    else {      pos = easing(time, duration);      now = pos * (to - from) + from;    }    elem.style.left = now + "px";  }, 10);};Flipsnap.prototype.destroy = function() {  var self = this;  eventTypes.forEach(function(type) {    self.element.removeEventListener(events.start[type], self, false);  });};Flipsnap.prototype._getTranslate = function(x) {  var self = this;  return self.use3d    ? 'translate3d(' + x + 'px, 0, 0)'    : 'translate(' + x + 'px, 0)';};Flipsnap.prototype._triggerEvent = function(type, bubbles, cancelable, data) {  var self = this;  var ev = document.createEvent('Event');  ev.initEvent(type, bubbles, cancelable);  if (data) {    for (var d in data) {      if (data.hasOwnProperty(d)) {        ev[d] = data[d];      }    }  }  return self.element.dispatchEvent(ev);};function getPage(event, page) {  return event.changedTouches ? event.changedTouches[0][page] : event[page];}function hasProp(props) {  return some(props, function(prop) {    return div.style[ prop ] !== undefined;  });}function setStyle(style, prop, val) {  var _saveProp = saveProp[ prop ];  if (_saveProp) {    style[ _saveProp ] = val;  }  else if (style[ prop ] !== undefined) {    saveProp[ prop ] = prop;    style[ prop ] = val;  }  else {    some(prefix, function(_prefix) {      var _prop = ucFirst(_prefix) + ucFirst(prop);      if (style[ _prop ] !== undefined) {        saveProp[ prop ] = _prop;        style[ _prop ] = val;        return true;      }    });  }}function getCSSVal(prop) {  if (div.style[ prop ] !== undefined) {    return prop;  }  else {    var ret;    some(prefix, function(_prefix) {      var _prop = ucFirst(_prefix) + ucFirst(prop);      if (div.style[ _prop ] !== undefined) {        ret = '-' + _prefix + '-' + prop;        return true;      }    });    return ret;  }}function ucFirst(str) {  return str.charAt(0).toUpperCase() + str.substr(1);}function some(ary, callback) {  for (var i = 0, len = ary.length; i < len; i++) {    if (callback(ary[i], i)) {      return true;    }  }  return false;}function getTriangleSide(x1, y1, x2, y2) {  var x = Math.abs(x1 - x2);  var y = Math.abs(y1 - y2);  var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));  return {    x: x,    y: y,    z: z  };}function getAngle(triangle) {  var cos = triangle.y / triangle.z;  var radina = Math.acos(cos);  return 180 / (Math.PI / radina);}if (typeof exports == 'object') {  module.exports = Flipsnap;}else if (typeof define == 'function' && define.amd) {  define(function() {    return Flipsnap;  });}else {  window.Flipsnap = Flipsnap;}})(window, window.document);

  

转载于:https://www.cnblogs.com/surfaces/p/4552588.html

你可能感兴趣的文章
JavaScript用栈的思想实现数制转换
查看>>
cocos2dx-2.2.1 免 Cygwin 环境搭建(Win8+VS2013+ADT Bundle+android-ndk-r9c)
查看>>
数据绑定原理
查看>>
设计模式之结构型代理模式
查看>>
虚函数、虚析构函数、虚函数表
查看>>
SpringBoot2.0整合Redission
查看>>
庞果网 合法字符串
查看>>
Oracle实例和服务知识点
查看>>
Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(十三)
查看>>
一分钟对我们的重要意义
查看>>
SqlServer操作远程数据库
查看>>
Zookeeper的结构和命令
查看>>
** exception error: no match of right hand side value
查看>>
[傅里叶变换及其应用学习笔记] 八. 时延性,尺度变化,卷积
查看>>
(leetcode题解)K-diff Pairs in an Array
查看>>
打开gvim发现菜单栏是乱码
查看>>
Vision Acquisition Software(NI-IMAQ), Vision Development Module
查看>>
饥荒猪镇物品 代码
查看>>
linq 俩表联合
查看>>
windows下编辑的shell复制到linux无法执行
查看>>