移动端整屏翻动特效
写在前面：
转自：http://www.wfuyu.com/s/jquerygroup/limq12lf.html
1. HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Document</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/page.css" /> </head> <body> <div class="section sec1"> <div class="middle"> <img src="./images/中间-滑动.png" alt="" /> </div> </div> <div class="section sec2"> <div class="middle"> <img src="./images/中间-滑动2.png" alt="" /> </div> </div> <div class="section sec3"></div> <div class="section sec4"></div> <div class="top"> <img src="./images/最上面.png" alt="" /> </div> <script src="js/rem.js"></script> <script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script> <script src="js/pageSlider.js"></script> <script> $(function () { var pageSlider = PageSlider.case({ loop: true }); }); </script> </body> </html>
2. CSS部分：
page.css
html, body { width: 100%; height: 100%; overflow: hidden; } /* page */ .section { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .section.current { display: inline-block; position: relative; } .section.next { display: inline-block; z-index: 2; } .section.prev { display: inline-block; z-index: 2; } .sec1 { background: url(../images/bg.png) no-repeat; background-size: 100% 100%; } .sec2 { background: #fef7ef; } .sec3 { background: yellow; } .sec4 { background: pink; } .middle { position: absolute; z-index: 1; } .middle img { width: 2rem; height: 2rem; } .top { position: fixed; top: 1rem; z-index: 2; } .top img { width: 2rem; height: 2rem; }
reset.css见上一篇
3. JS部分
pageSlider.js
/*! pageSlider 2015-08-03 */ !(function (a, b) { "use strict"; function c(a) { (this.inited = !1), (this.startY = 0), (this.distance = 0), (this.timer = null), (this.nextPageTop = 0), (this.prevPageTop = 0), (this.index = 0), (this.curPagePos = 0), (this.nextPagePos = 0), (this.pageHeight = 0), (this.prevPagePos = 0), (this.opt = { startPage: 1, range: 70, duration: 200, loop: !1, elastic: !0, translate3d: !0, callback: {}, }), this.init(a); } (c.prototype.motion = function (a) { return this.opt.translate3d ? "translate3d(0," + a + "px,0)" : "translate(0," + a + "px)"; }), (c.prototype.showSec = function (b, c) { a(".current").length && a(".current,.next,.prev") .css({ "-webkit-transition": null, "-webkit-transform": null }) .removeClass("current prev next"); var d, e, f, g = a(".section").length; "next" == c ? ((d = b == g ? 1 : b + 1), (e = d == g ? (this.opt.loop ? 1 : 0) : d + 1), (f = b)) : "prev" == c ? ((d = 1 == b ? g : b - 1), (e = b), (f = 1 == d ? (this.opt.loop ? g : 0) : d - 1)) : ((d = b), (e = b == g ? (this.opt.loop ? 1 : 0) : b + 1), (f = 1 == b ? (this.opt.loop ? g : 0) : b - 1)); var h = a(".sec" + d), i = a(".sec" + e), j = a(".sec" + f); h.addClass("current"), (this.pageHeight = a(".current").height()), i .addClass("next") .css("-webkit-transform", this.motion(this.pageHeight)), j .addClass("prev") .css("-webkit-transform", this.motion(-this.pageHeight)), h.addClass("ani").siblings(".section").removeClass("ani"), "function" == typeof this.opt.callback[d] && this.opt.callback[d](); }), (c.prototype.touchStartHandler = function (b) { var c = b.data.that; if (c.timer) return void b.preventDefault(); c.index = a(".section").index(a(this)) + 1; var d = b.touches[0]; (c.distance = 0), (c.startY = d.clientY), (c.curPagePos = a(this).offset().top), (c.nextPagePos = a(".next").length && a(".next").offset().top), (c.prevPagePos = a(".prev").length && a(".prev").offset().top), a(this) .off("touchmove") .on("touchmove", { that: c }, c.touchMoveHandler), a(this).off("touchend").on("touchend", { that: c }, c.touchEndHandler), b.preventDefault(); }), (c.prototype.touchMoveHandler = function (b) { var c = b.data.that; if (c.timer) return void b.preventDefault(); var d = b.touches[0]; return ( (c.distance = d.clientY - c.startY), Math.abs(c.distance) < 5 ? void b.preventDefault() : !c.opt.elastic && ((1 === c.index && c.distance > 0) || (c.index === a(".section").length && c.distance < 0)) ? void b.preventDefault() : ((c.curPageTop = c.curPagePos + c.distance), (c.nextPageTop = c.nextPagePos + c.distance), (c.prevPageTop = c.prevPagePos + c.distance), a(this).css("-webkit-transform", c.motion(c.curPageTop)), a(".next").css("-webkit-transform", c.motion(c.nextPageTop)), a(".prev").css("-webkit-transform", c.motion(c.prevPageTop)), void b.preventDefault()) ); }), (c.prototype.touchEndHandler = function (b) { var c = b.data.that; if (c.timer) return void b.preventDefault(); if ( (a(".current,.next,.prev").css( "-webkit-transition", "-webkit-transform " + c.opt.duration + "ms linear" ), (c.distance < -c.opt.range && a(".next").length) || (c.distance > c.opt.range && a(".prev").length)) ) { var d = !!(c.distance < -c.opt.range); a(this).css( "-webkit-transform", c.motion(d ? -a(this).height() : a(this).height()) ), a(d ? ".next" : ".prev").css("-webkit-transform", c.motion(0)), (c.timer = setTimeout(function () { c.showSec(c.index, d ? "next" : "prev"), clearTimeout(c.timer), (c.timer = null); }, c.opt.duration + 5)); } else a(this).css("-webkit-transform", c.motion(0)), a(".prev").css("-webkit-transform", c.motion(-c.pageHeight)), a(".next").css("-webkit-transform", c.motion(c.pageHeight)), (c.timer = setTimeout(function () { a(".current,.next,.prev").css({ "-webkit-transition": null }), clearTimeout(c.timer), (c.timer = null); }, c.opt.duration + 5)); b.preventDefault(); }), (c.prototype.go = function (a) { this.init(a); }), (c.prototype.init = function (c) { var d = this; "object" == typeof c ? (a.extend(!0, d.opt, c), (d.inited = !1)) : c && (d.opt.startPage = c), d.inited ? d.showSec(d.opt.startPage) : (a(".section") .off("touchstart") .on("touchstart", { that: d }, d.touchStartHandler), d.showSec(d.opt.startPage), (d.inited = !0)), a(b).on( "onorientationchange" in b ? "orientationchange" : "resize", function () { d.go(d.index + 1); } ); }), (c["case"] = function (a) { return new c(a); }), "function" == typeof define && "object" == typeof define.amd && define.amd ? define(function () { return c; }) : "undefined" != typeof module && module.exports ? ((module.exports = c["case"]), (module.exports.PageSlider = c)) : (b.PageSlider = c); })(window.Zepto, window, document);
其他的js见上一篇，《移动端适配方案》
