全屏滚动插件之 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,//每一页的滚动速度:400ms
onLeave: 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><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);
来源:https://blog.csdn.net/wcy7916/article/details/85157293
全屏滚动插件之 fullpage.js的更多相关文章
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
jQuery-全屏滚动插件[fullPage.js]API 使用方法总结 jQuery-全屏滚动插件fullPage.js使用方法总结 作者github及下载地址:https://github.c ...
- 全屏滚动实现:fullPage.js和fullPage
fullPage.js和fullPage都能实现全屏滚动,二者差别是:fullPage.js需依赖于JQuery库,而fullPage不须要依赖不论什么一个js库.能够单独使用. 一.fullPage ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
- AlloyTouch全屏滚动插件搞定顺滑H5页
使用姿势 在设计全屏滚动插件的时候,希望开发者几乎: 不用写任何脚本快速生成精致H5 支持PC滚轮和移动触摸 酷炫的转场动效 灵活的时间轴管理 一切皆可配置 但是不写脚本肯定没有灵活性咯?!不是的.这 ...
- Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...
随机推荐
- Linux系统字符集乱码问题
假设你在安装Linux的过程中就选择了中文.可能能够省去步骤1.2.反之.假设你先安装了英文环境,而后希望它支持中文,则能够1.2步 1.首先在linux中安装中文包安装中文简体包rpm -ivh k ...
- 配置远程maven仓库自己的步骤
---恢复内容开始--- 1.首先在远程服务器配置jdk.maven环境,这个可以在网上找 2.Nexus 安装与配置.这个见网上博客(https://blog.csdn.net/lewis_007/ ...
- hdu Portal(离线,并查集)
题意:在一张无向图上,已知边权,做q组询问,问小于L的点对共有几组.点对间的距离取=min(两点之间每一条通路上的最大值). 分析:这里取最大值的最小值,常用到二分.而这里利用离线算法,先对边从小到大 ...
- 解决 三星Note3 桌面小部件不实时更新/不刷新 的问题
机型及问题描述:我的是三星note3 (国行 SM-N9008V),已ROOT,安装了LBE安全大师.在桌面小部件中,有些不会实时更新.比如有 滴答清单(办过的事项无法勾选),百度云音乐(歌曲播放更新 ...
- 从零開始学Swift之Hello World进化版
上节课,也就是昨晚啦,我们学习到从零開始学Swift之Hello World.那一节仅仅有一句代码,大家会认为不够过瘾. 那么这节课,就给大家来多点瘾货吧! 先上图! //var 代表变量的类型, s ...
- 2017年Android百大框架排行榜(转)
一.榜单介绍 排行榜包括四大类: 单一框架:仅提供路由.网络层.UI层.通信层或其他单一功能的框架 混合开发框架:提供开发hybrid app.h5与webview结合能力.web app能力的框架 ...
- 多媒体开发之---开源库ffmeg的log之子解析
用了ffmeg快两年了,对其中的log甚是感兴趣,今天在做8148项目是,解读h264结构,看了<毕-新一代视频压缩编码标准h246> ,在第六章中的重排序里面看到了好熟悉的4x4矩阵zi ...
- ASP.NET动态网站制作(20)-- C#(3)
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- web安全之SQL注入---第四章 如何进行SQL注入攻击
第四章 如何进行SQL注入攻击1.数字注入2.字符串注入 '# '--
- lua(注册c库)
#include <iostream> #include <string.h> extern "C" { #include "lua-5.2.2/ ...