您的位置：首页 > Web前端 > JavaScript

flipsnap.js 源码阅读备份

2015-06-04 18:03 891 查看
这是官网：http://hokaccha.github.io/js-flipsnap/

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

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

2.定义全局变量

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

3.分别检测对transform3d，transform及trasition3个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()
函数

functionhasProp(props){
returnsome(props,function(prop){
returndiv.style[prop]!==undefined;
});
}

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

functionsome(ary,callback){
for(vari=0,len=ary.length;i<len;i++){
if(callback(ary[i],i)){
returntrue;
}
}
returnfalse;
}

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

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

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

vareventTypes=['touch','mouse'];
varevents={
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（）

functionFlipsnap(element,opts){
return(thisinstanceofFlipsnap)
?this.init(element,opts)
:newFlipsnap(element,opts);
}

8.定义Flipsnap类的初始化方法
init（）

Flipsnap.prototype.init=function(element,opts){
varself=this;
//setelement
self.element=element;
if(typeofelement==='string'){
self.element=document.querySelector(element);
}
if(!self.element){
thrownewError('elementnotfound');
}
if(support.mspointer){
self.element.style.msTouchAction='pan-y';
}
//setopts
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;
//setproperty
self.currentPoint=0;
self.currentX=0;
self.animation=false;
self.use3d=support.transform3d;
if(self.disable3d===true){
self.use3d=false;
}
//setdefaultstyle
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);
});
returnself;
};

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

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

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

functionsetStyle(style,prop,val){
var_saveProp=saveProp[prop];
if(_saveProp){
style[_saveProp]=val;
}
elseif(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;
returntrue;
}
});
}
}
并在
saveProp
中设置过的属性

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

functiongetCSSVal(prop){
if(div.style[prop]!==undefined){
returnprop;
}
else{
varret;
some(prefix,function(_prefix){
var_prop=ucFirst(_prefix)+ucFirst(prop);
if(div.style[_prop]!==undefined){
ret='-'+_prefix+'-'+prop;
returntrue;
}
});
returnret;
}
}

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

functionucFirst(str){
returnstr.charAt(0).toUpperCase()+str.substr(1);
}

self._getTranslate
为Flipsnap的内部方法

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

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

Flipsnap.prototype.refresh=function(){
varself=this;
//settingmaxpoint
self._maxPoint=(self.maxPoint===undefined)?(function(){
varchildNodes=self.element.childNodes,
itemLength=-1,
i=0,
len=childNodes.length,
node;
for(;i<len;i++){
node=childNodes[i];
if(node.nodeType===1){
itemLength++;
}
}
returnitemLength;
})():self.maxPoint;
//settingdistance
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;
}
//settingmaxX
self._maxX=-self._distance*self._maxPoint;
self.moveToPoint();
};

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

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

Flipsnap.prototype.moveToPoint=function(point,transitionDuration){
varself=this;
transitionDuration=transitionDuration===undefined
?self.transitionDuration:transitionDuration+'ms';
varbeforePoint=self.currentPoint;
//notcalledfrom`refresh()`
if(point===undefined){
point=self.currentPoint;
}
if(point<0){
self.currentPoint=0;
}
elseif(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){//ismove?
//`fsmoveend`isdeprecated
//`fspointmove`isrecommend.
self._triggerEvent('fsmoveend',true,false);
self._triggerEvent('fspointmove',true,false);
}
};

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

Flipsnap.prototype._setX=function(x,transitionDuration){
varself=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){
varself=this;
varelem=self.element;
varbegin=+newDate();
varfrom=parseInt(elem.style.left,10);
varto=x;
varduration=parseInt(transitionDuration,10);
vareasing=function(time,duration){
return-(time/=duration)*(time-2);
};
vartimer=setInterval(function(){
vartime=newDate()-begin;
varpos,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){
varself=this;
varev=document.createEvent('Event');
ev.initEvent(type,bubbles,cancelable);
if(data){
for(vardindata){
if(data.hasOwnProperty(d)){
ev[d]=data[d];
}
}
}
returnself.element.dispatchEvent(ev);
};

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

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

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

_touchStart()方法

Flipsnap.prototype._touchStart=function(event,type){
varself=this;
if(self.disableTouch||self.scrolling||gestureStart){
return;
}
self.element.addEventListener(events.move[type],self,false);
document.addEventListener(events.end[type],self,false);
vartagName=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()函数如下

functiongetPage(event,page){
returnevent.changedTouches?event.changedTouches[0][page]:event[page];
}

_touchMove()方法如下

Flipsnap.prototype._touchMove=function(event,type){
varself=this;
if(!self.scrolling||gestureStart){
return;
}
varpageX=getPage(event,'pageX');
varpageY=getPage(event,'pageY');
vardistX;
varnewX;
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);
}
//WhendistXis0,useonepreviousvalue.
//Forandroidfirefox.Whentouchendfired,touchmovealso
//firedanddistXiscertainlysetto0.
self.directionX=
distX===0?self.directionX:
distX>0?-1:1;
//iftheypreventusthenstopit
varisPrevent=!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/36vartriangle=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()函数如下

functiongetTriangleSide(x1,y1,x2,y2){
varx=Math.abs(x1-x2);
vary=Math.abs(y1-y2);
varz=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
return{
x:x,
y:y,
z:z
};
}

其中getAngle()函数如下

functiongetAngle(triangle){
varcos=triangle.y/triangle.z;
varradina=Math.acos(cos);
return180/(Math.PI/radina);
}

_touchEnd()方法如下

Flipsnap.prototype._touchEnd=function(event,type){
varself=this;
self.element.removeEventListener(events.move[type],self,false);
document.removeEventListener(events.end[type],self,false);
if(!self.scrolling){
return;
}
varnewPoint=-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;
}
elseif(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){
varself=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){
varself=this;
event.stopPropagation();
event.preventDefault();
};

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

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

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

Flipsnap.prototype.hasPrev=function(){
varself=this;
returnself.currentPoint>0;
};

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

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

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

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

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

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

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

15.将Flipsnap模块化

if(typeofexports=='object'){
module.exports=Flipsnap;
}
elseif(typeofdefine=='function'&&define.amd){
define(function(){
returnFlipsnap;
});
}
else{
window.Flipsnap=Flipsnap;
}



/**
*flipsnap.js
*
*@version0.6.2
*@urlhttp://hokaccha.github.com/js-flipsnap/*
*Copyright2011PixelGrid,Inc.
*LicensedundertheMITLicense:
*http://www.opensource.org/licenses/mit-license.php*/

(function(window,document,undefined){

vardiv=document.createElement('div');
varprefix=['webkit','moz','o','ms'];
varsaveProp={};
varsupport=Flipsnap.support={};
vargestureStart=false;

varDISTANCE_THRESHOLD=5;
varANGLE_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'inwindow;
support.mspointer=window.navigator.msPointerEnabled;

support.cssAnimation=(support.transform3d||support.transform)&&support.transition;

vareventTypes=['touch','mouse'];
varevents={
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;
});
}

functionFlipsnap(element,opts){
return(thisinstanceofFlipsnap)
?this.init(element,opts)
:newFlipsnap(element,opts);
}

Flipsnap.prototype.init=function(element,opts){
varself=this;

//setelement
self.element=element;
if(typeofelement==='string'){
self.element=document.querySelector(element);
}

if(!self.element){
thrownewError('elementnotfound');
}

if(support.mspointer){
self.element.style.msTouchAction='pan-y';
}

//setopts
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';

//setproperty
self.currentPoint=0;
self.currentX=0;
self.animation=false;
self.use3d=support.transform3d;
if(self.disable3d===true){
self.use3d=false;
}

//setdefaultstyle
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);
});

returnself;
};

Flipsnap.prototype.handleEvent=function(event){
varself=this;

switch(event.type){
//start
caseevents.start.touch:self._touchStart(event,'touch');break;
caseevents.start.mouse:self._touchStart(event,'mouse');break;

//move
caseevents.move.touch:self._touchMove(event,'touch');break;
caseevents.move.mouse:self._touchMove(event,'mouse');break;

//end
caseevents.end.touch:self._touchEnd(event,'touch');break;
caseevents.end.mouse:self._touchEnd(event,'mouse');break;

//click
case'click':self._click(event);break;
}
};

Flipsnap.prototype.refresh=function(){
varself=this;

//settingmaxpoint
self._maxPoint=(self.maxPoint===undefined)?(function(){
varchildNodes=self.element.childNodes,
itemLength=-1,
i=0,
len=childNodes.length,
node;
for(;i<len;i++){
node=childNodes[i];
if(node.nodeType===1){
itemLength++;
}
}

returnitemLength;
})():self.maxPoint;

//settingdistance
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;
}

//settingmaxX
self._maxX=-self._distance*self._maxPoint;

self.moveToPoint();
};

Flipsnap.prototype.hasNext=function(){
varself=this;

returnself.currentPoint<self._maxPoint;
};

Flipsnap.prototype.hasPrev=function(){
varself=this;

returnself.currentPoint>0;
};

Flipsnap.prototype.toNext=function(transitionDuration){
varself=this;

if(!self.hasNext()){
return;
}

self.moveToPoint(self.currentPoint+1,transitionDuration);
};

Flipsnap.prototype.toPrev=function(transitionDuration){
varself=this;

if(!self.hasPrev()){
return;
}

self.moveToPoint(self.currentPoint-1,transitionDuration);
};

Flipsnap.prototype.moveToPoint=function(point,transitionDuration){
varself=this;

transitionDuration=transitionDuration===undefined
?self.transitionDuration:transitionDuration+'ms';

varbeforePoint=self.currentPoint;

//notcalledfrom`refresh()`
if(point===undefined){
point=self.currentPoint;
}

if(point<0){
self.currentPoint=0;
}
elseif(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){//ismove?
//`fsmoveend`isdeprecated
//`fspointmove`isrecommend.
self._triggerEvent('fsmoveend',true,false);
self._triggerEvent('fspointmove',true,false);
}
};

Flipsnap.prototype._setX=function(x,transitionDuration){
varself=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){
varself=this;

if(self.disableTouch||self.scrolling||gestureStart){
return;
}

self.element.addEventListener(events.move[type],self,false);
document.addEventListener(events.end[type],self,false);

vartagName=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){
varself=this;

if(!self.scrolling||gestureStart){
return;
}

varpageX=getPage(event,'pageX');
varpageY=getPage(event,'pageY');
vardistX;
varnewX;

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);
}

//WhendistXis0,useonepreviousvalue.
//Forandroidfirefox.Whentouchendfired,touchmovealso
//firedanddistXiscertainlysetto0.
self.directionX=
distX===0?self.directionX:
distX>0?-1:1;

//iftheypreventusthenstopit
varisPrevent=!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/36vartriangle=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){
varself=this;

self.element.removeEventListener(events.move[type],self,false);
document.removeEventListener(events.end[type],self,false);

if(!self.scrolling){
return;
}

varnewPoint=-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;
}
elseif(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){
varself=this;

event.stopPropagation();
event.preventDefault();
};

Flipsnap.prototype._touchAfter=function(params){
varself=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){
varself=this;
varstyle=self.element.style;

for(varpropinstyles){
setStyle(style,prop,styles[prop]);
}
};

Flipsnap.prototype._animate=function(x,transitionDuration){
varself=this;

varelem=self.element;
varbegin=+newDate();
varfrom=parseInt(elem.style.left,10);
varto=x;
varduration=parseInt(transitionDuration,10);
vareasing=function(time,duration){
return-(time/=duration)*(time-2);
};
vartimer=setInterval(function(){
vartime=newDate()-begin;
varpos,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(){
varself=this;

eventTypes.forEach(function(type){
self.element.removeEventListener(events.start[type],self,false);
});
};

Flipsnap.prototype._getTranslate=function(x){
varself=this;

returnself.use3d
?'translate3d('+x+'px,0,0)'
:'translate('+x+'px,0)';
};

Flipsnap.prototype._triggerEvent=function(type,bubbles,cancelable,data){
varself=this;

varev=document.createEvent('Event');
ev.initEvent(type,bubbles,cancelable);

if(data){
for(vardindata){
if(data.hasOwnProperty(d)){
ev[d]=data[d];
}
}
}

returnself.element.dispatchEvent(ev);
};

functiongetPage(event,page){
returnevent.changedTouches?event.changedTouches[0][page]:event[page];
}

functionhasProp(props){
returnsome(props,function(prop){
returndiv.style[prop]!==undefined;
});
}

functionsetStyle(style,prop,val){
var_saveProp=saveProp[prop];
if(_saveProp){
style[_saveProp]=val;
}
elseif(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;
returntrue;
}
});
}
}

functiongetCSSVal(prop){
if(div.style[prop]!==undefined){
returnprop;
}
else{
varret;
some(prefix,function(_prefix){
var_prop=ucFirst(_prefix)+ucFirst(prop);
if(div.style[_prop]!==undefined){
ret='-'+_prefix+'-'+prop;
returntrue;
}
});
returnret;
}
}

functionucFirst(str){
returnstr.charAt(0).toUpperCase()+str.substr(1);
}

functionsome(ary,callback){
for(vari=0,len=ary.length;i<len;i++){
if(callback(ary[i],i)){
returntrue;
}
}
returnfalse;
}

functiongetTriangleSide(x1,y1,x2,y2){
varx=Math.abs(x1-x2);
vary=Math.abs(y1-y2);
varz=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));

return{
x:x,
y:y,
z:z
};
}

functiongetAngle(triangle){
varcos=triangle.y/triangle.z;
varradina=Math.acos(cos);

return180/(Math.PI/radina);
}

if(typeofexports=='object'){
module.exports=Flipsnap;
}
elseif(typeofdefine=='function'&&define.amd){
define(function(){
returnFlipsnap;
});
}
else{
window.Flipsnap=Flipsnap;
}

})(window,window.document);


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航