flipsnap（上下左右翻页功能）

来源：互联网发布：c语言教材谭浩强 pdf 编辑：程序博客网时间：2024/04/30 08:44

相对于 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;}();

相应的全部代码在这里

0 0