flipsnap（上下左右翻页功能）
flipsnap（上下左右翻页功能）
White feathe
发布于 2021-12-08 14:38:31
发布于 2021-12-08 14:38:31
文章被收录于专栏：White feathe 的博客
相对于 swiper 插件来讲的话，页面功能不需要太强大的时候，这个比较轻便，如果你有时间的话，你可以做一个。
flipsnap的简单使用
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telphone=no, email=no"/>
<meta http-equiv="expires" content="0">
<title>创建账户</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div>
<div class="page page-1-1 page-current">
<section>
<form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
<h3>账户</h3>
<button type="submit" class="btnNextStep">下一步</button>
</form>
</section>
</div>
<div class="page page-1-2 hide">
<section>
<form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
<h3>账户2</h3>
<button type="submit" class="btnNextStep">下一步</button>
</form>
</section>
</div>
<div class="page page-1-3 hide">
<section>
<form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
<h3>账户3</h3>
<button type="submit" class="btnNextStep">下一步</button>
</form>
</section>
</div>
<div class="page page-1-4 hide">
<section>
<form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
<h3>账户4</h3>
<button type="submit" class="btnNextStep">下一步</button>
</form>
</section>
</div>
</div>
</body>
<script src="js/zepto.min.js"></script>
<script src="js/flipsnap.min.js"></script>
<script src="js/index.js" defer="defer"></script>
</html>flipsnap.min.js
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* (function(i,o,g){var n=o.createElement("div");var p=["webkit","moz","o","ms"];var r={};var l=b.support={};var t=false;var d=5;var h=55;l.transform3d=u(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);l.transform=u(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"]);l.transition=u(["transitionProperty","WebkitTransitionProperty","MozTransitionProperty","OTransitionProperty","msTransitionProperty"]);l.addEventListener="addEventListener" in i;l.mspointer=i.navigator.msPointerEnabled;l.cssAnimation=(l.transform3d||l.transform)&&l.transition;var j=["touch","mouse"];var a={start:{touch:"touchstart",mouse:"mousedown"},move:{touch:"touchmove",mouse:"mousemove"},end:{touch:"touchend",mouse:"mouseup"}};if(l.addEventListener){o.addEventListener("gesturestart",function(){t=true});o.addEventListener("gestureend",function(){t=false})}function b(v,w){return(this instanceof b)?this.init(v,w):new b(v,w)}b.prototype.init=function(w,x){var v=this;v.element=w;if(typeof w==="string"){v.element=o.querySelector(w)}if(!v.element){throw new Error("element not found")}if(l.mspointer){v.element.style.msTouchAction="pan-y"}x=x||{};v.distance=x.distance;v.maxPoint=x.maxPoint;v.disableTouch=(x.disableTouch===g)?false:x.disableTouch;v.disable3d=(x.disable3d===g)?false:x.disable3d;v.transitionDuration=(x.transitionDuration===g)?"350ms":x.transitionDuration+"ms";v.currentPoint=0;v.currentX=0;v.animation=false;v.use3d=l.transform3d;if(v.disable3d===true){v.use3d=false}if(l.cssAnimation){v._setStyle({transitionProperty:s("transform"),transitionTimingFunction:"cubic-bezier(0,0,0.25,1)",transitionDuration:"0ms",transform:v._getTranslate(0)})}else{v._setStyle({position:"relative",left:"0px"})}v.refresh();j.forEach(function(y){v.element.addEventListener(a.start[y],v,false)});return v};b.prototype.handleEvent=function(w){var v=this;switch(w.type){case a.start.touch:v._touchStart(w,"touch");break;case a.start.mouse:v._touchStart(w,"mouse");break;case a.move.touch:v._touchMove(w,"touch");break;case a.move.mouse:v._touchMove(w,"mouse");break;case a.end.touch:v._touchEnd(w,"touch");break;case a.end.mouse:v._touchEnd(w,"mouse");break;case"click":v._click(w);break}};b.prototype.refresh=function(){var v=this;v._maxPoint=(v.maxPoint===g)?(function(){var A=v.element.childNodes,y=-1,x=0,w=A.length,z;for(;x<w;x++){z=A[x];if(z.nodeType===1){y++}}return y})():v.maxPoint;if(v.distance===g){if(v._maxPoint<0){v._distance=0}else{v._distance=v.element.scrollWidth/(v._maxPoint+1)}}else{v._distance=v.distance}v._maxX=-v._distance*v._maxPoint;v.moveToPoint()};b.prototype.hasNext=function(){var v=this;return v.currentPoint<v._maxPoint};b.prototype.hasPrev=function(){var v=this;return v.currentPoint>0};b.prototype.toNext=function(v){var w=this;if(!w.hasNext()){return}w.moveToPoint(w.currentPoint+1,v)};b.prototype.toPrev=function(v){var w=this;if(!w.hasPrev()){return}w.moveToPoint(w.currentPoint-1,v)};b.prototype.moveToPoint=function(w,v){var x=this;v=v===g?x.transitionDuration:v+"ms";var y=x.currentPoint;if(w===g){w=x.currentPoint}if(w<0){x.currentPoint=0}else{if(w>x._maxPoint){x.currentPoint=x._maxPoint}else{x.currentPoint=parseInt(w,10)}}if(l.cssAnimation){x._setStyle({transitionDuration:v})}else{x.animation=true}x._setX(-x.currentPoint*x._distance,v);if(y!==x.currentPoint){x._triggerEvent("fsmoveend",true,false);x._triggerEvent("fspointmove",true,false)}};b.prototype._setX=function(w,v){var y=this;y.currentX=w;if(l.cssAnimation){y.element.style[r.transform]=y._getTranslate(w)}else{if(y.animation){y._animate(w,v||y.transitionDuration)}else{y.element.style.left=w+"px"}}};b.prototype._touchStart=function(y,x){var v=this;if(v.disableTouch||v.scrolling||t){return}v.element.addEventListener(a.move[x],v,false);o.addEventListener(a.end[x],v,false);var w=y.target.tagName;if(x==="mouse"&&w!=="SELECT"&&w!=="INPUT"&&w!=="TEXTAREA"&&w!=="BUTTON"){y.preventDefault()}if(l.cssAnimation){v._setStyle({transitionDuration:"0ms"})}else{v.animation=false}v.scrolling=true;v.moveReady=false;v.startPageX=q(y,"pageX");v.startPageY=q(y,"pageY");v.basePageX=v.startPageX;v.directionX=0;v.startTime=y.timeStamp;v._triggerEvent("fstouchstart",true,false)};b.prototype._touchMove=function(w,B){var D=this;if(!D.scrolling||t){return}var z=q(w,"pageX");var y=q(w,"pageY");var C;var v;if(D.moveReady){w.preventDefault();C=z-D.basePageX;v=D.currentX+C;if(v>=0||v<D._maxX){v=Math.round(D.currentX+C/3)}D.directionX=C===0?D.directionX:C>0?-1:1;var x=!D._triggerEvent("fstouchmove",true,true,{delta:C,direction:D.directionX});if(x){D._touchAfter({moved:false,originalPoint:D.currentPoint,newPoint:D.currentPoint,cancelled:true})}else{D._setX(v)}}else{var A=k(D.startPageX,D.startPageY,z,y);if(A.z>d){if(f(A)>h){w.preventDefault();D.moveReady=true;D.element.addEventListener("click",D,true)}else{D.scrolling=false}}}D.basePageX=z};b.prototype._touchEnd=function(y,x){var w=this;w.element.removeEventListener(a.move[x],w,false);o.removeEventListener(a.end[x],w,false);if(!w.scrolling){return}var v=-w.currentX/w._distance;v=(w.directionX>0)?Math.ceil(v):(w.directionX<0)?Math.floor(v):Math.round(v);if(v<0){v=0}else{if(v>w._maxPoint){v=w._maxPoint}}w._touchAfter({moved:v!==w.currentPoint,originalPoint:w.currentPoint,newPoint:v,cancelled:false});w.moveToPoint(v)};b.prototype._click=function(w){var v=this;w.stopPropagation();w.preventDefault()};b.prototype._touchAfter=function(w){var v=this;v.scrolling=false;v.moveReady=false;setTimeout(function(){v.element.removeEventListener("click",v,true)},200);v._triggerEvent("fstouchend",true,false,w)};b.prototype._setStyle=function(x){var v=this;var w=v.element.style;for(var y in x){e(w,y,x[y])}};b.prototype._animate=function(C,A){var F=this;var y=F.element;var w=+new Date();var D=parseInt(y.style.left,10);var E=C;var z=parseInt(A,10);var B=function(G,x){return -(G/=x)*(G-2)};var v=setInterval(function(){var G=new Date()-w;var H,x;if(G>z){clearInterval(v);x=E}else{H=B(G,z);x=H*(E-D)+D}y.style.left=x+"px"},10)};b.prototype.destroy=function(){var v=this;j.forEach(function(w){v.element.removeEventListener(a.start[w],v,false)})};b.prototype._getTranslate=function(v){var w=this;return w.use3d?"translate3d("+v+"px, 0, 0)":"translate("+v+"px, 0)"};b.prototype._triggerEvent=function(y,w,v,A){var x=this;var z=o.createEvent("Event");z.initEvent(y,w,v);if(A){for(var B in A){if(A.hasOwnProperty(B)){z[B]=A[B]}}}return x.element.dispatchEvent(z)};function q(v,w){return v.changedTouches?v.changedTouches[0][w]:v[w]}function u(v){return m(v,function(w){return n.style[w]!==g})}function e(w,y,x){var v=r[y];if(v){w[v]=x}else{if(w[y]!==g){r[y]=y;w[y]=x}else{m(p,function(z){var A=c(z)+c(y);if(w[A]!==g){r[y]=A;w[A]=x;return true}})}}}function s(w){if(n.style[w]!==g){return w}else{var v;m(p,function(x){var y=c(x)+c(w);if(n.style[y]!==g){v="-"+x+"-"+w;return true}});return v}}function c(v){return v.charAt(0).toUpperCase()+v.substr(1)}function m(x,y){for(var w=0,v=x.length;w<v;w++){if(y(x[w],w)){return true}}return false}function k(A,C,w,B){var v=Math.abs(A-w);var E=Math.abs(C-B);var D=Math.sqrt(Math.pow(v,2)+Math.pow(E,2));return{x:v,y:E,z:D}}function f(x){var w=x.y/x.z;var v=Math.acos(w);return 180/(Math.PI/v)}if(typeof exports=="object"){module.exports=b}else{if(typeof define=="function"&&define.amd){define(function(){return b})}else{i.Flipsnap=b}}})(window,window.document);
*/index.js
/**
* 开户中心
*/
;!function(){
var now = {
row: 1,
col: 1
},
last = {
row: 0,
col: 0
},
isAnimating = false;
const towards = {
up: 1,
right: 2,
down: 3,
left: 4
};
function pageMove(tw) {
var lastPage = ".page-" + last.row + "-" + last.col,
nowPage = ".page-" + now.row + "-" + now.col;
switch(tw) {
case towards.up:
outClass = 'pt-page-moveToTop';
inClass = 'pt-page-moveFromBottom';
break;
case towards.right:
outClass = 'pt-page-moveToRight';
inClass = 'pt-page-moveFromLeft';
break;
case towards.down:
outClass = 'pt-page-moveToBottom';
inClass = 'pt-page-moveFromTop';
break;
case towards.left:
outClass = 'pt-page-moveToLeft';
inClass = 'pt-page-moveFromRight';
break;
}
isAnimating = true;
$(nowPage).removeClass("hide");
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
//暂时先去除延时加载效果，需要的时候，自动加上即可
$(lastPage).removeClass('page-current');
$(lastPage).removeClass(outClass);
$(lastPage).addClass("hide");
$(nowPage).addClass('page-current');
$(nowPage).removeClass(inClass);
isAnimating = false;
}
function btnNext() {
if(isAnimating) return;
last.row = now.row;
last.col = now.col;
//修改过----------------------&& last.row < 5 &&----------------------------------
now.row = 1;
now.col += 1;
if(last.col <= 0) {
now = {
row: 1,
col: 1
}, last = {
row: 0,
col: 0
};
}
if(last.col >= 4) {
//这里可以放置完成的标签
} else if(last.col == 3) {
setTimeout(function() {
$(".btnNextStep").html("完成");
}, 300);
}
pageMove(towards.left);
}
this.btnNext = btnNext;
}();相应的全部代码在 这里
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016/09/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
