全屏滚动插件之 fullpage.js

前言：做移动端网页下滑/点击切换到下一页的效果，采用了fullpage,js最新的版本

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js

因为他的初始化是酱紫的：

new fullpage('#fullpage', {anchors:['page1', 'page2', 'page3']
});

anchors属性会在当前页面的地址后面加上当前页的锚点，像这样

https://alvarotrigo.com/fullPage/#page2

1：导致点击手机左上角返回的时候不能返回到上一级页面，如果在page2页面，点击返回会跳转到page1页面。
:2：在微信里面打开的时候，底部会出现白色横条，用于切换上下页的。这样会影响页面显示效果。
3：个别安卓手机页面会显示错乱。

解决办法：不要用最新版本的fullpage.js 3.0,用老版本fullPage 2.4,2.5

页面js:

//fullpage 整屏滑动切换插件
//初始化
$(document).ready(function () {$('#fullpage').fullpage({scrollingSpeed: 400,//每一页的滚动速度：400msonLeave: function (index, direction) {console.log(direction)//direction的值为1,2,3,4,5.........,代表当前切换显示的页面，//在这里可以加一些动画，当滑动到某一个页面。动画就显示}});$.fn.fullpage.setAllowScrolling(true);
});//点击滑动到下一页
$(document).on('click', '.next_guide', function () {$.fn.fullpage.moveSectionDown();
});
$(document).on('click', '.next_guide_icon', function () {$.fn.fullpage.moveSectionDown();
});

组件css
fullpage.css:

/*** fullPage 2.4.6* https://github.com/alvarotrigo/fullPage.js* MIT licensed** Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo*/
html, body {margin: 0;padding: 0;overflow: hidden;/*Avoid flicker on slides transitions for mobile phones #336 */-webkit-tap-highlight-color: rgba(0,0,0,0);
}#superContainer {height: 100%;position: relative;/* Touch detection for Windows 8 */-ms-touch-action: none;/* IE 11 on Windows Phone 8.1*/touch-action: none;
}.fp-section {position: relative;-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */-moz-box-sizing: border-box; /* <=28 */box-sizing: border-box;
}.fp-slide {float: left;
}.fp-slide, .fp-slidesContainer {height: 100%;display: block;
}.fp-slides {z-index: 1;height: 100%;overflow: hidden;position: relative;-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */transition: all 0.3s ease-out;
}.fp-section.fp-table, .fp-slide.fp-table {display: table;table-layout: fixed;width: 100%;
}.fp-tableCell {display: table-cell;vertical-align: middle;width: 100%;height: 100%;
}.fp-slidesContainer {float: left;position: relative;
}.fp-controlArrow {position: absolute;z-index: 4;top: 50%;cursor: pointer;width: 0;height: 0;border-style: solid;margin-top: -38px;
}.fp-controlArrow.fp-prev {left: 15px;width: 0;border-width: 38.5px 34px 38.5px 0;border-color: transparent #fff transparent transparent;}.fp-controlArrow.fp-next {right: 15px;border-width: 38.5px 0 38.5px 34px;border-color: transparent transparent transparent #fff;}.fp-scrollable {overflow: scroll;
}.fp-notransition {-webkit-transition: none !important;transition: none !important;
}#fp-nav {position: fixed;z-index: 100;margin-top: -32px;top: 50%;opacity: 1;
}#fp-nav.right {right: 17px;}#fp-nav.left {left: 17px;}.fp-slidesNav {position: absolute;z-index: 4;left: 50%;opacity: 1;
}.fp-slidesNav.bottom {bottom: 17px;}.fp-slidesNav.top {top: 17px;}#fp-nav ul,.fp-slidesNav ul {margin: 0;padding: 0;}#fp-nav ul li,.fp-slidesNav ul li {display: block;width: 14px;height: 13px;margin: 7px;position: relative;}.fp-slidesNav ul li {display: inline-block;}#fp-nav ul li a,.fp-slidesNav ul li a {display: block;position: relative;z-index: 1;width: 100%;height: 100%;cursor: pointer;text-decoration: none;}#fp-nav ul li a.active span,.fp-slidesNav ul li a.active span {background: #333;}#fp-nav ul li a span,.fp-slidesNav ul li a span {top: 2px;left: 2px;width: 8px;height: 8px;border: 1px solid #000;background: rgba(0, 0, 0, 0);border-radius: 50%;position: absolute;z-index: 1;}#fp-nav ul li .fp-tooltip {position: absolute;top: -2px;color: #fff;font-size: 14px;/*font-family: arial, helvetica, sans-serif;*/white-space: nowrap;max-width: 220px;overflow: hidden;display: block;opacity: 0;width: 0;}#fp-nav ul li:hover .fp-tooltip {-webkit-transition: opacity 0.2s ease-in;transition: opacity 0.2s ease-in;width: auto;opacity: 1;}#fp-nav ul li .fp-tooltip.right {right: 20px;}#fp-nav ul li .fp-tooltip.left {left: 20px;}

fullpage.js:

/*** fullPage 2.5.4* https://github.com/alvarotrigo/fullPage.js* MIT licensed** Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo*/
(function (b) {b.fn.fullpage = function (c) {function pa(a) { a.find(".fp-slides").after('<div class="fp-controlArrow fp-prev"></div><div class="fp-controlArrow fp-next"></div>'); "#fff" != c.controlArrowColor && (a.find(".fp-controlArrow.fp-next").css("border-color", "transparent transparent transparent " + c.controlArrowColor), a.find(".fp-controlArrow.fp-prev").css("border-color", "transparent " + c.controlArrowColor + " transparent transparent")); c.loopHorizontal || a.find(".fp-controlArrow.fp-prev").hide() } function qa() {b("body").append('<div id="fp-nav"><ul></ul></div>');k = b("#fp-nav"); k.css("color", c.navigationColor); k.addClass(c.navigationPosition); for (var a = 0; a < b(".fp-section").length; a++) { var d = ""; c.anchors.length && (d = c.anchors[a]); var d = '<li><a href="#' + d + '"><span></span></a>', e = c.navigationTooltips[a]; void 0 != e && "" != e && (d += '<div class="fp-tooltip ' + c.navigationPosition + '">' + e + "</div>"); d += "</li>"; k.find("ul").append(d) }} function R() {b(".fp-section").each(function () { var a = b(this).find(".fp-slide"); a.length ? a.each(function () { y(b(this)) }) : y(b(this)) }); b.isFunction(c.afterRender) &&c.afterRender.call(this)} function S() {if (!c.autoScrolling || c.scrollBar) { var a = b(window).scrollTop(), d = 0, e = Math.abs(a - b(".fp-section").first().offset().top); b(".fp-section").each(function (c) { var f = Math.abs(a - b(this).offset().top); f < e && (d = c, e = f) }); var f = b(".fp-section").eq(d) } if (!c.autoScrolling && !f.hasClass("active")) {F = !0; var ra = b(".fp-section.active").index(".fp-section") + 1, g = G(f), h = f.data("anchor"), k = f.index(".fp-section") + 1, l = f.find(".fp-slide.active"); if (l.length) var n = l.data("anchor"), t = l.index();f.addClass("active").siblings().removeClass("active"); m || (b.isFunction(c.onLeave) && c.onLeave.call(this, ra, k, g), b.isFunction(c.afterLoad) && c.afterLoad.call(this, h, k)); H(h, 0); c.anchors.length && !m && (p = h, I(t, n, h, k)); clearTimeout(T); T = setTimeout(function () { F = !1 }, 100)} c.scrollBar && (clearTimeout(U), U = setTimeout(function () { m || q(f) }, 1E3))} function V(a) { return scrollable = a.find(".fp-slides").length ? a.find(".fp-slide.active").find(".fp-scrollable") : a.find(".fp-scrollable") } function z(a, d) {if (l[a]) {if ("down" ==a) var c = "bottom", f = b.fn.fullpage.moveSectionDown; else c = "top", f = b.fn.fullpage.moveSectionUp; if (0 < d.length) if (c = "top" === c ? !d.scrollTop() : "bottom" === c ? d.scrollTop() + 1 + d.innerHeight() >= d[0].scrollHeight : void 0, c) f(); else return !0; else f()}} function sa(a) {var d = a.originalEvent; if (!W(a.target)) {c.autoScrolling && !c.scrollBar && a.preventDefault(); a = b(".fp-section.active"); var e = V(a); m || t || (d = X(d), u = d.y, A = d.x, a.find(".fp-slides").length && Math.abs(B - A) > Math.abs(v - u) ? Math.abs(B - A) > b(window).width() / 100 * c.touchSensitivity &&(B > A ? l.right && b.fn.fullpage.moveSlideRight() : l.left && b.fn.fullpage.moveSlideLeft()) : c.autoScrolling && !c.scrollBar && Math.abs(v - u) > b(window).height() / 100 * c.touchSensitivity && (v > u ? z("down", e) : u > v && z("up", e)))}} function W(a, d) { d = d || 0; var e = b(a).parent(); return d < c.normalScrollElementTouchThreshold && e.is(c.normalScrollElements) ? !0 : d == c.normalScrollElementTouchThreshold ? !1 : W(e, ++d) } function ta(a) { a = X(a.originalEvent); v = a.y; B = a.x } function r(a) {if (c.autoScrolling) {a = window.event || a; var d = Math.max(-1, Math.min(1,a.wheelDelta || -a.deltaY || -a.detail)); c.scrollBar && (a.preventDefault ? a.preventDefault() : a.returnValue = !1); a = b(".fp-section.active"); a = V(a); m || (0 > d ? z("down", a) : z("up", a)); return !1}} function Y(a) { var d = b(".fp-section.active").find(".fp-slides"); if (d.length && !t) { var e = d.find(".fp-slide.active"), f = null, f = "prev" === a ? e.prev(".fp-slide") : e.next(".fp-slide"); if (!f.length) { if (!c.loopHorizontal) return; f = "prev" === a ? e.siblings(":last") : e.siblings(":first") } t = !0; w(d, f) } } function Z() { b(".fp-slide.active").each(function () { J(b(this)) }) }function q(a, d, e) {var f = a.position(); if ("undefined" !== typeof f && (d = { element: a, callback: d, isMovementUp: e, dest: f, dtop: f.top, yMovement: G(a), anchorLink: a.data("anchor"), sectionIndex: a.index(".fp-section"), activeSlide: a.find(".fp-slide.active"), activeSection: b(".fp-section.active"), leavingSection: b(".fp-section.active").index(".fp-section") + 1, localIsResizing: x }, !(d.activeSection.is(a) && !x || c.scrollBar && b(window).scrollTop() === d.dtop))) {if (d.activeSlide.length) var g = d.activeSlide.data("anchor"), h = d.activeSlide.index();c.autoScrolling && c.continuousVertical && "undefined" !== typeof d.isMovementUp && (!d.isMovementUp && "up" == d.yMovement || d.isMovementUp && "down" == d.yMovement) && (d.isMovementUp ? b(".fp-section.active").before(d.activeSection.nextAll(".fp-section")) : b(".fp-section.active").after(d.activeSection.prevAll(".fp-section").get().reverse()), n(b(".fp-section.active").position().top), Z(), d.wrapAroundElements = d.activeSection, d.dest = d.element.position(), d.dtop = d.dest.top, d.yMovement = G(d.element)); a.addClass("active").siblings().removeClass("active");m = !0; I(h, g, d.anchorLink, d.sectionIndex); b.isFunction(c.onLeave) && !d.localIsResizing && c.onLeave.call(this, d.leavingSection, d.sectionIndex + 1, d.yMovement); ua(d); p = d.anchorLink; c.autoScrolling && H(d.anchorLink, d.sectionIndex)}} function ua(a) { if (c.css3 && c.autoScrolling && !c.scrollBar) aa("translate3d(0px, -" + a.dtop + "px, 0px)", !0), setTimeout(function () { ba(a) }, c.scrollingSpeed); else { var d = va(a); b(d.element).animate(d.options, c.scrollingSpeed, c.easing).promise().done(function () { ba(a) }) } } function va(a) {var b ={}; c.autoScrolling && !c.scrollBar ? (b.options = { top: -a.dtop }, b.element = "." + ca) : (b.options = { scrollTop: a.dtop }, b.element = "html, body"); return b} function wa(a) { a.wrapAroundElements && a.wrapAroundElements.length && (a.isMovementUp ? b(".fp-section:first").before(a.wrapAroundElements) : b(".fp-section:last").after(a.wrapAroundElements), n(b(".fp-section.active").position().top), Z()) } function ba(a) {wa(a); b.isFunction(c.afterLoad) && !a.localIsResizing && c.afterLoad.call(this, a.anchorLink, a.sectionIndex + 1); setTimeout(function () {m =!1; b.isFunction(a.callback) && a.callback.call(this)}, 600)} function da() { if (!F) { var a = window.location.hash.replace("#", "").split("/"), b = a[0], a = a[1]; if (b.length) { var c = "undefined" === typeof p, f = "undefined" === typeof p && "undefined" === typeof a && !t; (b && b !== p && !c || f || !t && K != a) && L(b, a) } } } function w(a, d) {var e = d.position(), f = a.find(".fp-slidesContainer").parent(), g = d.index(), h = a.closest(".fp-section"), k = h.index(".fp-section"), l = h.data("anchor"), n = h.find(".fp-slidesNav"), m = d.data("anchor"), q = x; if (c.onSlideLeave) {var p =h.find(".fp-slide.active").index(), r; r = p == g ? "none" : p > g ? "left" : "right"; q || "none" === r || b.isFunction(c.onSlideLeave) && c.onSlideLeave.call(this, l, k + 1, p, r)} d.addClass("active").siblings().removeClass("active"); "undefined" === typeof m && (m = g); !c.loopHorizontal && c.controlArrows && (h.find(".fp-controlArrow.fp-prev").toggle(0 != g), h.find(".fp-controlArrow.fp-next").toggle(!d.is(":last-child"))); h.hasClass("active") && I(g, m, l, k); var u = function () {q || b.isFunction(c.afterSlideLoad) && c.afterSlideLoad.call(this, l, k +1, m, g); t = !1}; c.css3 ? (e = "translate3d(-" + e.left + "px, 0px, 0px)", ea(a.find(".fp-slidesContainer"), 0 < c.scrollingSpeed).css(fa(e)), setTimeout(function () { u() }, c.scrollingSpeed, c.easing)) : f.animate({ scrollLeft: e.left }, c.scrollingSpeed, c.easing, function () { u() }); n.find(".active").removeClass("active"); n.find("li").eq(g).find("a").addClass("active")} function ga() {ha(); if (C) {if ("text" !== b(document.activeElement).attr("type")) {var a = b(window).height(); Math.abs(a - M) > 20 * Math.max(M, a) / 100 && (b.fn.fullpage.reBuild(!0),M = a)}} else clearTimeout(ia), ia = setTimeout(function () { b.fn.fullpage.reBuild(!0) }, 500)} function ha() { if (c.responsive) { var a = g.hasClass("fp-responsive"); b(window).width() < c.responsive ? a || (b.fn.fullpage.setAutoScrolling(!1, "internal"), b("#fp-nav").hide(), g.addClass("fp-responsive")) : a && (b.fn.fullpage.setAutoScrolling(N.autoScrolling, "internal"), b("#fp-nav").show(), g.removeClass("fp-responsive")) } } function ea(a) {var b = "all " + c.scrollingSpeed + "ms " + c.easingcss3; a.removeClass("fp-notransition"); return a.css({"-webkit-transition": b,transition: b})} function O(a) { return a.addClass("fp-notransition") } function xa(a, d) { if (825 > a || 900 > d) { var c = Math.min(100 * a / 825, 100 * d / 900).toFixed(2); b("body").css("font-size", c + "%") } else b("body").css("font-size", "100%") } function H(a, d) { c.menu && (b(c.menu).find(".active").removeClass("active"), b(c.menu).find('[data-menuanchor="' + a + '"]').addClass("active")); c.navigation && (b("#fp-nav").find(".active").removeClass("active"), a ? b("#fp-nav").find('a[href="#' + a + '"]').addClass("active") : b("#fp-nav").find("li").eq(d).find("a").addClass("active")) }function G(a) { var d = b(".fp-section.active").index(".fp-section"); a = a.index(".fp-section"); return d == a ? "none" : d > a ? "up" : "down" } function y(a) {a.css("overflow", "hidden"); var b = a.closest(".fp-section"), e = a.find(".fp-scrollable"); if (e.length) var f = e.get(0).scrollHeight; else f = a.get(0).scrollHeight, c.verticalCentered && (f = a.find(".fp-tableCell").get(0).scrollHeight); b = h - parseInt(b.css("padding-bottom")) - parseInt(b.css("padding-top")); f > b ? e.length ? e.css("height", b + "px").parent().css("height", b + "px") : (c.verticalCentered ?a.find(".fp-tableCell").wrapInner('<div class="fp-scrollable" />') : a.wrapInner('<div class="fp-scrollable" />'), a.find(".fp-scrollable").slimScroll({ allowPageScroll: !0, height: b + "px", size: "10px", alwaysVisible: !0 })) : ja(a); a.css("overflow", "")} function ja(a) { a.find(".fp-scrollable").children().first().unwrap().unwrap(); a.find(".slimScrollBar").remove(); a.find(".slimScrollRail").remove() } function ka(a) { a.addClass("fp-table").wrapInner('<div class="fp-tableCell" style="height:' + la(a) + 'px;" />') } function la(a) {var b =h; if (c.paddingTop || c.paddingBottom) b = a, b.hasClass("fp-section") || (b = a.closest(".fp-section")), a = parseInt(b.css("padding-top")) + parseInt(b.css("padding-bottom")), b = h - a; return b} function aa(a, b) { b ? ea(g) : O(g); g.css(fa(a)); setTimeout(function () { g.removeClass("fp-notransition") }, 10) } function L(a, d) { "undefined" === typeof d && (d = 0); var c = isNaN(a) ? b('[data-anchor="' + a + '"]') : b(".fp-section").eq(a - 1); a === p || c.hasClass("active") ? ma(c, d) : q(c, function () { ma(c, d) }) } function ma(a, b) {if ("undefined" != typeof b) {var c =a.find(".fp-slides"), f = c.find('[data-anchor="' + b + '"]'); f.length || (f = c.find(".fp-slide").eq(b)); f.length && w(c, f)}} function ya(a, b) { a.append('<div class="fp-slidesNav"><ul></ul></div>'); var e = a.find(".fp-slidesNav"); e.addClass(c.slidesNavPosition); for (var f = 0; f < b; f++)e.find("ul").append('<li><a href="#"><span></span></a></li>'); e.css("margin-left", "-" + e.width() / 2 + "px"); e.find("li").first().find("a").addClass("active") } function I(a, b, e, f) {var g = ""; c.anchors.length ? (a ? ("undefined" !== typeof e && (g = e), "undefined" ===typeof b && (b = a), K = b, na(g + "/" + b)) : ("undefined" !== typeof a && (K = b), na(e)), D(location.hash)) : "undefined" !== typeof a ? D(f + "-" + a) : D(String(f))} function na(a) { if (c.recordHistory) location.hash = a; else if (C || P) history.replaceState(void 0, void 0, "#" + a); else { var b = window.location.href.split("#")[0]; window.location.replace(b + "#" + a) } } function D(a) { a = a.replace("/", "-").replace("#", ""); b("body")[0].className = b("body")[0].className.replace(/\b\s?fp-viewing-[^\s]+\b/g, ""); b("body").addClass("fp-viewing-" + a) } function za() {var a =document.createElement("p"), b, c = { webkitTransform: "-webkit-transform", OTransform: "-o-transform", msTransform: "-ms-transform", MozTransform: "-moz-transform", transform: "transform" }; document.body.insertBefore(a, null); for (var f in c) void 0 !== a.style[f] && (a.style[f] = "translate3d(1px,1px,1px)", b = window.getComputedStyle(a).getPropertyValue(c[f])); document.body.removeChild(a); return void 0 !== b && 0 < b.length && "none" !== b} function oa() {return window.PointerEvent ? { down: "pointerdown", move: "pointermove" } : {down: "MSPointerDown",move: "MSPointerMove"}} function X(a) { var b = []; b.y = "undefined" !== typeof a.pageY && (a.pageY || a.pageX) ? a.pageY : a.touches[0].pageY; b.x = "undefined" !== typeof a.pageX && (a.pageY || a.pageX) ? a.pageX : a.touches[0].pageX; return b } function J(a) { b.fn.fullpage.setScrollingSpeed(0, "internal"); w(a.closest(".fp-slides"), a); b.fn.fullpage.setScrollingSpeed(N.scrollingSpeed, "internal") } function n(a) { c.scrollBar ? g.scrollTop(a) : c.css3 ? aa("translate3d(0px, -" + a + "px, 0px)", !1) : g.css("top", -a) } function fa(a) {return {"-webkit-transform": a,"-moz-transform": a, "-ms-transform": a, transform: a}} function Aa() {n(0); b("#fp-nav, .fp-slidesNav, .fp-controlArrow").remove(); b(".fp-section").css({ height: "", "background-color": "", padding: "" }); b(".fp-slide").css({ width: "" }); g.css({ height: "", position: "", "-ms-touch-action": "", "touch-action": "" }); b(".fp-section, .fp-slide").each(function () { ja(b(this)); b(this).removeClass("fp-table active") }); O(g); O(g.find(".fp-easing")); g.find(".fp-tableCell, .fp-slidesContainer, .fp-slides").each(function () { b(this).replaceWith(this.childNodes) });b("html, body").scrollTop(0)} function Q(a, b, e) { c[a] = b; "internal" !== e && (N[a] = b) } function E(a, b) { console && console[a] && console[a]("fullPage: " + b) } c = b.extend({menu: !1, anchors: [], navigation: !1, navigationPosition: "right", navigationColor: "#000", navigationTooltips: [], slidesNavigation: !1, slidesNavPosition: "bottom", scrollBar: !1, css3: !0, scrollingSpeed: 700, autoScrolling: !0, easing: "easeInQuart", easingcss3: "ease", loopBottom: !1, loopTop: !1, loopHorizontal: !0, continuousVertical: !1, normalScrollElements: null, scrollOverflow: !1,touchSensitivity: 5, normalScrollElementTouchThreshold: 5, keyboardScrolling: !0, animateAnchor: !0, recordHistory: !0, controlArrows: !0, controlArrowColor: "#fff", verticalCentered: !0, resize: !0, sectionsColor: [], paddingTop: 0, paddingBottom: 0, fixedElements: null, responsive: 0, sectionSelector: ".section", slideSelector: ".slide", afterLoad: null, onLeave: null, afterRender: null, afterResize: null, afterReBuild: null, afterSlideLoad: null, onSlideLeave: null}, c); (function () {c.continuousVertical && (c.loopTop || c.loopBottom) && (c.continuousVertical =!1, E("warn", "Option `loopTop/loopBottom` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled")); c.continuousVertical && c.scrollBar && (c.continuousVertical = !1, E("warn", "Option `scrollBar` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled")); b.each(c.anchors, function (a, c) { (b("#" + c).length || b('[name="' + c + '"]').length) && E("error", "data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE).") })})(); b.extend(b.easing,{ easeInQuart: function (a, b, c, f, g) { return f * (b /= g) * b * b * b + c } }); b.fn.fullpage.setAutoScrolling = function (a, d) {Q("autoScrolling", a, d); var e = b(".fp-section.active"); c.autoScrolling && !c.scrollBar ? (b("html, body").css({ overflow: "hidden", height: "100%" }), b.fn.fullpage.setRecordHistory(c.recordHistory, "internal"), g.css({ "-ms-touch-action": "none", "touch-action": "none" }), e.length && n(e.position().top)) : (b("html, body").css({ overflow: "visible", height: "initial" }), b.fn.fullpage.setRecordHistory(!1, "internal"), g.css({"-ms-touch-action": "","touch-action": ""}), n(0), b("html, body").scrollTop(e.position().top))}; b.fn.fullpage.setRecordHistory = function (a, b) { Q("recordHistory", a, b) }; b.fn.fullpage.setScrollingSpeed = function (a, b) { Q("scrollingSpeed", a, b) }; b.fn.fullpage.setMouseWheelScrolling = function (a) {a ? document.addEventListener ? (document.addEventListener("mousewheel", r, !1), document.addEventListener("wheel", r, !1)) : document.attachEvent("onmousewheel", r) : document.addEventListener ? (document.removeEventListener("mousewheel", r, !1), document.removeEventListener("wheel",r, !1)) : document.detachEvent("onmousewheel", r)}; b.fn.fullpage.setAllowScrolling = function (a, c) {if ("undefined" != typeof c) c = c.replace(" ", "").split(","), b.each(c, function (c, d) { switch (d) { case "up": l.up = a; break; case "down": l.down = a; break; case "left": l.left = a; break; case "right": l.right = a; break; case "all": b.fn.fullpage.setAllowScrolling(a) } }); else if (a) {if (b.fn.fullpage.setMouseWheelScrolling(!0), C || P) MSPointer = oa(), b(document).off("touchstart " + MSPointer.down).on("touchstart " + MSPointer.down, ta), b(document).off("touchmove " +MSPointer.move).on("touchmove " + MSPointer.move, sa)} else if (b.fn.fullpage.setMouseWheelScrolling(!1), C || P) MSPointer = oa(), b(document).off("touchstart " + MSPointer.down), b(document).off("touchmove " + MSPointer.move)}; b.fn.fullpage.setKeyboardScrolling = function (a) { c.keyboardScrolling = a }; b.fn.fullpage.moveSectionUp = function () { var a = b(".fp-section.active").prev(".fp-section"); a.length || !c.loopTop && !c.continuousVertical || (a = b(".fp-section").last()); a.length && q(a, null, !0) }; b.fn.fullpage.moveSectionDown = function () {var a =b(".fp-section.active").next(".fp-section"); a.length || !c.loopBottom && !c.continuousVertical || (a = b(".fp-section").first()); a.length && q(a, null, !1)}; b.fn.fullpage.moveTo = function (a, c) { var e = "", e = isNaN(a) ? b('[data-anchor="' + a + '"]') : b(".fp-section").eq(a - 1); "undefined" !== typeof c ? L(a, c) : 0 < e.length && q(e) }; b.fn.fullpage.moveSlideRight = function () { Y("next") }; b.fn.fullpage.moveSlideLeft = function () { Y("prev") }; b.fn.fullpage.reBuild = function (a) {x = !0; var d = b(window).width(); h = b(window).height(); c.resize && xa(h, d);b(".fp-section").each(function () { parseInt(b(this).css("padding-bottom")); parseInt(b(this).css("padding-top")); c.verticalCentered && b(this).find(".fp-tableCell").css("height", la(b(this)) + "px"); b(this).css("height", h + "px"); if (c.scrollOverflow) { var a = b(this).find(".fp-slide"); a.length ? a.each(function () { y(b(this)) }) : y(b(this)) } a = b(this).find(".fp-slides"); a.length && w(a, a.find(".fp-slide.active")) }); b(".fp-section.active").position(); d = b(".fp-section.active"); d.index(".fp-section") && q(d); x = !1; b.isFunction(c.afterResize) &&a && c.afterResize.call(this); b.isFunction(c.afterReBuild) && !a && c.afterReBuild.call(this)}; var t = !1, C = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|Windows Phone|Tizen|Bada)/), P = "ontouchstart" in window || 0 < navigator.msMaxTouchPoints || navigator.maxTouchPoints, g = b(this), h = b(window).height(), m = !1, x = !1, p, K, k, ca = "fullpage-wrapper", l = { up: !0, down: !0, left: !0, right: !0 }, N = jQuery.extend(!0, {}, c); b.fn.fullpage.setAllowScrolling(!0); c.css3 && (c.css3 = za()); b(this).length ? (g.css({height: "100%",position: "relative"}), g.addClass(ca)) : E("error", "Error! Fullpage.js needs to be initialized with a selector. For example: $('#myContainer').fullpage();"); b(c.sectionSelector).each(function () { b(this).addClass("fp-section") }); b(c.slideSelector).each(function () { b(this).addClass("fp-slide") }); c.navigation && qa(); b(".fp-section").each(function (a) {var d = b(this), e = b(this).find(".fp-slide"), f = e.length; a || 0 !== b(".fp-section.active").length || b(this).addClass("active"); b(this).css("height", h + "px"); (c.paddingTop ||c.paddingBottom) && b(this).css("padding", c.paddingTop + " 0 " + c.paddingBottom + " 0"); "undefined" !== typeof c.sectionsColor[a] && b(this).css("background-color", c.sectionsColor[a]); "undefined" !== typeof c.anchors[a] && b(this).attr("data-anchor", c.anchors[a]); if (1 < f) {a = 100 * f; var g = 100 / f; e.wrapAll('<div class="fp-slidesContainer" />'); e.parent().wrap('<div class="fp-slides" />'); b(this).find(".fp-slidesContainer").css("width", a + "%"); c.controlArrows && pa(b(this)); c.slidesNavigation && ya(b(this), f); e.each(function (a) {b(this).css("width",g + "%"); c.verticalCentered && ka(b(this))}); d = d.find(".fp-slide.active"); 0 == d.length ? e.eq(0).addClass("active") : J(d)} else c.verticalCentered && ka(b(this))}).promise().done(function () {b.fn.fullpage.setAutoScrolling(c.autoScrolling, "internal"); var a = b(".fp-section.active").find(".fp-slide.active"); a.length && (0 != b(".fp-section.active").index(".fp-section") || 0 == b(".fp-section.active").index(".fp-section") && 0 != a.index()) && J(a); c.fixedElements && c.css3 && b(c.fixedElements).appendTo("body"); c.navigation && (k.css("margin-top","-" + k.height() / 2 + "px"), k.find("li").eq(b(".fp-section.active").index(".fp-section")).find("a").addClass("active")); c.menu && c.css3 && b(c.menu).closest(".fullpage-wrapper").length && b(c.menu).appendTo("body"); c.scrollOverflow ? ("complete" === document.readyState && R(), b(window).on("load", R)) : b.isFunction(c.afterRender) && c.afterRender.call(this); ha(); a = window.location.hash.replace("#", "").split("/")[0]; if (a.length) {var d = b('[data-anchor="' + a + '"]'); !c.animateAnchor && d.length && (c.autoScrolling ? n(d.position().top) :(n(0), D(a), b("html, body").scrollTop(d.position().top)), H(a, null), b.isFunction(c.afterLoad) && c.afterLoad.call(this, a, d.index(".fp-section") + 1), d.addClass("active").siblings().removeClass("active"))} b(window).on("load", function () { var a = window.location.hash.replace("#", "").split("/"), b = a[0], a = a[1]; b && L(b, a) })}); var T, U, F = !1; b(window).on("scroll", S); var v = 0, B = 0, u = 0, A = 0; b(window).on("hashchange", da); b(document).keydown(function (a) {if (c.keyboardScrolling && c.autoScrolling && (40 != a.which && 38 != a.which || a.preventDefault(),!m)) switch (a.which) { case 38: case 33: b.fn.fullpage.moveSectionUp(); break; case 40: case 34: b.fn.fullpage.moveSectionDown(); break; case 36: b.fn.fullpage.moveTo(1); break; case 35: b.fn.fullpage.moveTo(b(".fp-section").length); break; case 37: b.fn.fullpage.moveSlideLeft(); break; case 39: b.fn.fullpage.moveSlideRight() }}); b(document).on("click touchstart", "#fp-nav a", function (a) { a.preventDefault(); a = b(this).parent().index(); q(b(".fp-section").eq(a)) }); b(document).on("click touchstart", ".fp-slidesNav a", function (a) {a.preventDefault();a = b(this).closest(".fp-section").find(".fp-slides"); var c = a.find(".fp-slide").eq(b(this).closest("li").index()); w(a, c)}); c.normalScrollElements && (b(document).on("mouseenter", c.normalScrollElements, function () { b.fn.fullpage.setMouseWheelScrolling(!1) }), b(document).on("mouseleave", c.normalScrollElements, function () { b.fn.fullpage.setMouseWheelScrolling(!0) })); b(".fp-section").on("click touchstart", ".fp-controlArrow", function () { b(this).hasClass("fp-prev") ? b.fn.fullpage.moveSlideLeft() : b.fn.fullpage.moveSlideRight() });b(window).resize(ga); var M = h, ia; b.fn.fullpage.destroy = function (a) {b.fn.fullpage.setAutoScrolling(!1, "internal"); b.fn.fullpage.setAllowScrolling(!1); b.fn.fullpage.setKeyboardScrolling(!1); b(window).off("scroll", S).off("hashchange", da).off("resize", ga); b(document).off("click", "#fp-nav a").off("mouseenter", "#fp-nav li").off("mouseleave", "#fp-nav li").off("click", ".fp-slidesNav a").off("mouseover", c.normalScrollElements).off("mouseout", c.normalScrollElements); b(".fp-section").off("click", ".fp-controlArrow");a && Aa()}}
})(jQuery);

全屏滚动插件之 fullpage.js相关推荐

jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
前端jQuery的全屏滚动插件（使用方法）
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
全屏滚动插件fullPage.js
效果效果本文介绍使用fullPage.js插件可轻易创建全屏滚动网站.很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大 ...
js修炼——手写全屏滚动插件
全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维. 如下效果: 接下来看PageSwitch.js ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
Jquary全屏滚动插件fullpage.js的使用
1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站 2.引包 CDNJS地址: https://cdnjs.com/librarie ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
前端全屏滚动学习总结
全屏滚动-学习总结全屏滚动是指一次鼠标滚动切换整个屏幕的内容,多用于产品展示.年终总结等页面,能够在网页上呈现出PPT般的效果,简洁且美观. 在线演示1-商品介绍,在线演示2-年终总结实现代码全 ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...

全屏滚动插件之 fullpage.js

前言：做移动端网页下滑/点击切换到下一页的效果，采用了fullpage,js最新的版本

解决办法：不要用最新版本的fullpage.js 3.0,用老版本fullPage 2.4,2.5

全屏滚动插件之 fullpage.js相关推荐

最新文章

热门文章