js全屏滚动
许黎明
①引入依赖文件
jquery.pagepiling.js
jquery.pagepiling.css
// 初始化
pageling() {
$('#parentID').pagepiling({
sectionsColor: [], // 内容区域的背景颜色 例：['#fff', '#eee']
afterLoad: function(anchorLink, index) {
// 加载完成后
},
afterRender: function() {},
onLeave: function(index, nextIndex, direction) {
// 离开某一屏
}
})
}② 内容
<div id="parentId" class="parentId">
<div class="section">
<div class="content"></div>
</div>
<div class="section">
<div class="content"></div>
</div>
<div class="section pp-scrollable">
<!-- pp-scrollable 可控制内容可滚动 -->
<div class="content"></div>
</div>
</div>③ 依赖
jquery.pagepiling.js
/*!
* pagepiling.js 1.5.6
*
* https://github.com/alvarotrigo/pagePiling.js
* @license MIT licensed
*
* Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
*/
(function ($, document, window, undefined) {
'use strict';
$.fn.pagepiling = function (custom) {
var PP = $.fn.pagepiling;
var container = $(this);
var lastScrolledDestiny;
var lastAnimation = 0;
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
var touchStartY = 0, touchStartX = 0, touchEndY = 0, touchEndX = 0;
var scrollings = [];
//Defines the delay to take place before being able to scroll to the next section
//BE CAREFUL! Not recommened to change it under 400 for a good behavior in laptops and
//Apple devices (laptops, mouses...)
var scrollDelay = 600;
// Create some defaults, extending them with any options that were provided
var options = $.extend(true, {
direction: 'vertical',
menu: null,
verticalCentered: true,
sectionsColor: [],
anchors: [],
scrollingSpeed: 700,
easing: 'easeInQuart',
loopBottom: false,
loopTop: false,
css3: true,
navigation: {
textColor: '#000',
bulletsColor: '#000',
position: 'right',
tooltips: []
},
normalScrollElements: null,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 5,
keyboardScrolling: true,
sectionSelector: '.section',
animateAnchor: false,
//events
afterLoad: null,
onLeave: null,
afterRender: null
}, custom);
//easeInQuart animation included in the plugin
$.extend($.easing,{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }});
/**
* Defines the scrolling speed
*/
PP.setScrollingSpeed = function(value){
options.scrollingSpeed = value;
};
/**
* Adds or remove the possiblity of scrolling through sections by using the mouse wheel or the trackpad.
*/
PP.setMouseWheelScrolling = function (value){
if(value){
addMouseWheelHandler();
}else{
removeMouseWheelHandler();
}
};
/**
* Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures.
*/
PP.setAllowScrolling = function (value){
if(value){
PP.setMouseWheelScrolling(true);
addTouchHandler();
}else{
PP.setMouseWheelScrolling(false);
removeTouchHandler();
}
};
/**
* Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys
*/
PP.setKeyboardScrolling = function (value){
options.keyboardScrolling = value;
};
/**
* Moves sectio up
*/
PP.moveSectionUp = function () {
var prev = $('.pp-section.active').prev('.pp-section');
//looping to the bottom if there's no more sections above
if (!prev.length && options.loopTop) {
prev = $('.pp-section').last();
}
if (prev.length) {
scrollPage(prev);
}
};
/**
* Moves sectio down
*/
PP.moveSectionDown = function () {
var next = $('.pp-section.active').next('.pp-section');
//looping to the top if there's no more sections below
if(!next.length && options.loopBottom){
next = $('.pp-section').first();
}
if (next.length) {
scrollPage(next);
}
};
/**
* Moves the site to the given anchor or index
*/
PP.moveTo = function (section){
var destiny = '';
if(isNaN(section)){
destiny = $(document).find('[data-anchor="'+section+'"]');
}else{
destiny = $('.pp-section').eq( (section -1) );
}
if(destiny.length > 0){
scrollPage(destiny);
}
};
//adding internal class names to void problem with common ones
$(options.sectionSelector).each(function(){
$(this).addClass('pp-section');
});
//if css3 is not supported, it will use jQuery animations
if(options.css3){
options.css3 = support3d();
}
$(container).css({
'overflow' : 'hidden',
'-ms-touch-action': 'none', /* Touch detection for Windows 8 */
'touch-action': 'none' /* IE 11 on Windows Phone 8.1*/
});
//init
PP.setAllowScrolling(true);
//creating the navigation dots
if (!$.isEmptyObject(options.navigation) ) {
addVerticalNavigation();
}
var zIndex = $('.pp-section').length;
$('.pp-section').each(function (index) {
$(this).data('data-index', index);
$(this).css('z-index', zIndex);
//if no active section is defined, the 1st one will be the default one
if (!index && $('.pp-section.active').length === 0) {
$(this).addClass('active');
}
if (typeof options.anchors[index] !== 'undefined') {
$(this).attr('data-anchor', options.anchors[index]);
}
if (typeof options.sectionsColor[index] !== 'undefined') {
$(this).css('background-color', options.sectionsColor[index]);
}
if(options.verticalCentered && !$(this).hasClass('pp-scrollable')){
addTableClass($(this));
}
zIndex = zIndex - 1;
}).promise().done(function(){
//vertical centered of the navigation + first bullet active
if(options.navigation){
$('#pp-nav').css('margin-top', '-' + ($('#pp-nav').height()/2) + 'px');
$('#pp-nav').find('li').eq($('.pp-section.active').index('.pp-section')).find('a').addClass('active');
}
$(window).on('load', function() {
scrollToAnchor();
});
$.isFunction( options.afterRender ) && options.afterRender.call( this);
});
/**
* Enables vertical centering by wrapping the content and the use of table and table-cell
*/
function addTableClass(element){
element.addClass('pp-table').wrapInner('<div class="pp-tableCell" style="height:100%" />');
}
/**
* Retuns `up` or `down` depending on the scrolling movement to reach its destination
* from the current section.
*/
function getYmovement(destiny){
var fromIndex = $('.pp-section.active').index('.pp-section');
var toIndex = destiny.index('.pp-section');
if(fromIndex > toIndex){
return 'up';
}
return 'down';
}
/**
* Scrolls the page to the given destination
*/
function scrollPage(destination, animated) {
var v ={
destination: destination,
animated: animated,
activeSection: $('.pp-section.active'),
anchorLink: destination.data('anchor'),
sectionIndex: destination.index('.pp-section'),
toMove: destination,
yMovement: getYmovement(destination),
leavingSection: $('.pp-section.active').index('.pp-section') + 1
};
//quiting when activeSection is the target element
if(v.activeSection.is(destination)){ return; }
if(typeof v.animated === 'undefined'){
v.animated = true;
}
if(typeof v.anchorLink !== 'undefined'){
setURLHash(v.anchorLink, v.sectionIndex);
}
v.destination.addClass('active').siblings().removeClass('active');
v.sectionsToMove = getSectionsToMove(v);
//scrolling down (moving sections up making them disappear)
if (v.yMovement === 'down') {
v.translate3d = getTranslate3d();
v.scrolling = '-100%';
if(!options.css3){
v.sectionsToMove.each(function(index){
if(index != v.activeSection.index('.pp-section')){
$(this).css(getScrollProp(v.scrolling));
}
});
}
v.animateSection = v.activeSection;
}
//scrolling up (moving section down to the viewport)
else {
v.translate3d = 'translate3d(0px, 0px, 0px)';
v.scrolling = '0';
v.animateSection = destination;
}
$.isFunction(options.onLeave) && options.onLeave.call(this, v.leavingSection, (v.sectionIndex + 1), v.yMovement);
performMovement(v);
activateMenuElement(v.anchorLink);
activateNavDots(v.anchorLink, v.sectionIndex);
lastScrolledDestiny = v.anchorLink;
var timeNow = new Date().getTime();
lastAnimation = timeNow;
}
/**
* Performs the movement (by CSS3 or by jQuery)
*/
function performMovement(v){
if(options.css3){
transformContainer(v.animateSection, v.translate3d, v.animated);
v.sectionsToMove.each(function(){
transformContainer($(this), v.translate3d, v.animated);
});
setTimeout(function () {
afterSectionLoads(v);
}, options.scrollingSpeed);
}else{
v.scrollOptions = getScrollProp(v.scrolling);
if(v.animated){
v.animateSection.animate(
v.scrollOptions,
options.scrollingSpeed, options.easing, function () {
readjustSections(v);
afterSectionLoads(v);
});
}else{
v.animateSection.css(getScrollProp(v.scrolling));
setTimeout(function(){
readjustSections(v);
afterSectionLoads(v);
},400);
}
}
}
/**
* Actions to execute after a secion is loaded
*/
function afterSectionLoads(v){
//callback (afterLoad) if the site is not just resizing and readjusting the slides
$.isFunction(options.afterLoad) && options.afterLoad.call(this, v.anchorLink, (v.sectionIndex + 1));
}
function getSectionsToMove(v){
var sectionToMove;
if(v.yMovement === 'down'){
sectionToMove = $('.pp-section').map(function(index){
if (index < v.destination.index('.pp-section')){
return $(this);
}
});
}else{
sectionToMove = $('.pp-section').map(function(index){
if (index > v.destination.index('.pp-section')){
return $(this);
}
});
}
return sectionToMove;
}
/**
* Returns the sections to re-adjust in the background after the section loads.
*/
function readjustSections(v){
if(v.yMovement === 'up'){
v.sectionsToMove.each(function(index){
$(this).css(getScrollProp(v.scrolling));
});
}
}
/**
* Gets the property used to create the scrolling effect when using jQuery animations
* depending on the plugin direction option.
*/
function getScrollProp(propertyValue){
if(options.direction === 'vertical'){
return {'top': propertyValue};
}
return {'left': propertyValue};
}
/**
* Scrolls the site without anymations (usually used in the background without the user noticing it)
*/
function silentScroll(section, offset){
if (options.css3) {
transformContainer(section, getTranslate3d(), false);
}
else{
section.css(getScrollProp(offset));
}
}
/**
* Sets the URL hash for a section with slides
*/
function setURLHash(anchorLink, sectionIndex){
if(options.anchors.length){
location.hash = anchorLink;
setBodyClass(location.hash);
}else{
setBodyClass(String(sectionIndex));
}
}
/**
* Sets a class for the body of the page depending on the active section / slide
*/
function setBodyClass(text){
//removing the #
text = text.replace('#','');
//removing previous anchor classes
$('body')[0].className = $('body')[0].className.replace(/\b\s?pp-viewing-[^\s]+\b/g, '');
//adding the current anchor
$('body').addClass('pp-viewing-' + text);
}
//TO DO
function scrollToAnchor(){
//getting the anchor link in the URL and deleting the `#`
var value = window.location.hash.replace('#', '');
var sectionAnchor = value;
var section = $(document).find('.pp-section[data-anchor="'+sectionAnchor+'"]');
if(section.length > 0){ //if theres any #
scrollPage(section, options.animateAnchor);
}
}
/**
* Determines if the transitions between sections still taking place.
* The variable `scrollDelay` adds a "save zone" for devices such as Apple laptops and Apple magic mouses
*/
function isMoving(){
var timeNow = new Date().getTime();
// Cancel scroll if currently animating or within quiet period
if (timeNow - lastAnimation < scrollDelay + options.scrollingSpeed) {
return true;
}
return false;
}
//detecting any change on the URL to scroll to the given anchor link
//(a way to detect back history button as we play with the hashes on the URL)
// $(window).on('hashchange', hashChangeHandler);
/**
* Actions to do when the hash (#) in the URL changes.
*/
function hashChangeHandler(){
var value = window.location.hash.replace('#', '').split('/');
var sectionAnchor = value[0];
if(sectionAnchor.length){
/*in order to call scrollpage() only once for each destination at a time
It is called twice for each scroll otherwise, as in case of using anchorlinks `hashChange`
event is fired on every scroll too.*/
if (sectionAnchor && sectionAnchor !== lastScrolledDestiny) {
var section;
if(isNaN(sectionAnchor)){
section = $(document).find('[data-anchor="'+sectionAnchor+'"]');
}else{
section = $('.pp-section').eq( (sectionAnchor -1) );
}
scrollPage(section);
}
}
}
/**
* Cross browser transformations
*/
function getTransforms(translate3d) {
return {
'-webkit-transform': translate3d,
'-moz-transform': translate3d,
'-ms-transform': translate3d,
'transform': translate3d
};
}
/**
* Adds a css3 transform property to the container class with or without animation depending on the animated param.
*/
function transformContainer(element, translate3d, animated) {
element.toggleClass('pp-easing', animated);
element.css(getTransforms(translate3d));
}
/**
* Sliding with arrow keys, both, vertical and horizontal
*/
$(document).keydown(function (e) {
if(options.keyboardScrolling && !isMoving()){
//Moving the main page with the keyboard arrows if keyboard scrolling is enabled
switch (e.which) {
//up
case 38:
case 33:
PP.moveSectionUp();
break;
//down
case 40:
case 34:
PP.moveSectionDown();
break;
//Home
case 36:
PP.moveTo(1);
break;
//End
case 35:
PP.moveTo($('.pp-section').length);
break;
//left
case 37:
PP.moveSectionUp();
break;
//right
case 39:
PP.moveSectionDown();
break;
default:
return; // exit this handler for other keys
}
}
});
/**
* If `normalScrollElements` is used, the mouse wheel scrolling will scroll normally
* over the defined elements in the option.
*/
if(options.normalScrollElements){
$(document).on('mouseenter', options.normalScrollElements, function () {
PP.setMouseWheelScrolling(false);
});
$(document).on('mouseleave', options.normalScrollElements, function(){
PP.setMouseWheelScrolling(true);
});
}
/**
* Detecting mousewheel scrolling
*
* http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
* http://www.sitepoint.com/html5-javascript-mouse-wheel/
*/
var prevTime = new Date().getTime();
function MouseWheelHandler(e) {
var curTime = new Date().getTime();
// cross-browser wheel delta
e = e || window.event;
var value = e.wheelDelta || -e.deltaY || -e.detail;
var delta = Math.max(-1, Math.min(1, value));
var horizontalDetection = typeof e.wheelDeltaX !== 'undefined' || typeof e.deltaX !== 'undefined';
var isScrollingVertically = (Math.abs(e.wheelDeltaX) < Math.abs(e.wheelDelta)) || (Math.abs(e.deltaX ) < Math.abs(e.deltaY) || !horizontalDetection);
//Limiting the array to 150 (lets not waste memory!)
if(scrollings.length > 149){
scrollings.shift();
}
//keeping record of the previous scrollings
scrollings.push(Math.abs(value));
//time difference between the last scroll and the current one
var timeDiff = curTime-prevTime;
prevTime = curTime;
//haven't they scrolled in a while?
//(enough to be consider a different scrolling action to scroll another section)
if(timeDiff > 200){
//emptying the array, we dont care about old scrollings for our averages
scrollings = [];
}
if(!isMoving()){
var activeSection = $('.pp-section.active');
var scrollable = isScrollable(activeSection);
var averageEnd = getAverage(scrollings, 10);
var averageMiddle = getAverage(scrollings, 70);
var isAccelerating = averageEnd >= averageMiddle;
if(isAccelerating && isScrollingVertically){
//scrolling down?
if (delta < 0) {
scrolling('down', scrollable);
//scrolling up?
}else if(delta>0){
scrolling('up', scrollable);
}
}
return false;
}
}
/**
* Gets the average of the last `number` elements of the given array.
*/
function getAverage(elements, number){
var sum = 0;
//taking `number` elements from the end to make the average, if there are not enought, 1
var lastElements = elements.slice(Math.max(elements.length - number, 1));
for(var i = 0; i < lastElements.length; i++){
sum = sum + lastElements[i];
}
return Math.ceil(sum/number);
}
/**
* Determines the way of scrolling up or down:
* by 'automatically' scrolling a section or by using the default and normal scrolling.
*/
function scrolling(type, scrollable){
var check;
var scrollSection;
if(type == 'down'){
check = 'bottom';
scrollSection = PP.moveSectionDown;
}else{
check = 'top';
scrollSection = PP.moveSectionUp;
}
if(scrollable.length > 0 ){
//is the scrollbar at the start/end of the scroll?
if(isScrolled(check, scrollable)){
scrollSection();
}else{
return true;
}
}else{
//moved up/down
scrollSection();
}
}
/**
* Return a boolean depending on whether the scrollable element is at the end or at the start of the scrolling
* depending on the given type.
*/
function isScrolled(type, scrollable){
if(type === 'top'){
return !scrollable.scrollTop();
}else if(type === 'bottom'){
return scrollable.scrollTop() + 1 + scrollable.innerHeight() >= scrollable[0].scrollHeight;
}
}
/**
* Determines whether the active section or slide is scrollable through and scrolling bar
*/
function isScrollable(activeSection){
return activeSection.filter('.pp-scrollable');
}
/**
* Removes the auto scrolling action fired by the mouse wheel and tackpad.
* After this function is called, the mousewheel and trackpad movements won't scroll through sections.
*/
function removeMouseWheelHandler(){
if (container.get(0).addEventListener) {
container.get(0).removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
container.get(0).removeEventListener('wheel', MouseWheelHandler, false); //Firefox
} else {
container.get(0).detachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
}
}
/**
* Adds the auto scrolling action for the mouse wheel and tackpad.
* After this function is called, the mousewheel and trackpad movements will scroll through sections
*/
function addMouseWheelHandler(){
if (container.length) {
if (container.get(0).addEventListener) {
container.get(0).addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
container.get(0).addEventListener('wheel', MouseWheelHandler, false); //Firefox
} else {
container.get(0).attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
}
}
}
/**
* Adds the possibility to auto scroll through sections on touch devices.
*/
function addTouchHandler(){
if(isTouch){
//Microsoft pointers
var MSPointer = getMSPointer();
container.off('touchstart ' + MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
container.off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
}
}
/**
* Removes the auto scrolling for touch devices.
*/
function removeTouchHandler(){
if(isTouch){
//Microsoft pointers
var MSPointer = getMSPointer();
container.off('touchstart ' + MSPointer.down);
container.off('touchmove ' + MSPointer.move);
}
}
/*
* Returns and object with Microsoft pointers (for IE<11 and for IE >= 11)
* http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
*/
function getMSPointer(){
var pointer;
//IE >= 11 & rest of browsers
if(window.PointerEvent){
pointer = { down: 'pointerdown', move: 'pointermove', up: 'pointerup'};
}
//IE < 11
else{
pointer = { down: 'MSPointerDown', move: 'MSPointerMove', up: 'MSPointerUp'};
}
return pointer;
}
/**
* Gets the pageX and pageY properties depending on the browser.
* https://github.com/alvarotrigo/fullPage.js/issues/194#issuecomment-34069854
*/
function getEventsPage(e){
var events = new Array();
events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);
return events;
}
/**
* As IE >= 10 fires both touch and mouse events when using a mouse in a touchscreen
* this way we make sure that is really a touch event what IE is detecting.
*/
function isReallyTouch(e){
//if is not IE || IE is detecting `touch` or `pen`
return typeof e.pointerType === 'undefined' || e.pointerType != 'mouse';
}
/**
* Getting the starting possitions of the touch event
*/
function touchStartHandler(event){
var e = event.originalEvent;
if(isReallyTouch(e)){
var touchEvents = getEventsPage(e);
touchStartY = touchEvents.y;
touchStartX = touchEvents.x;
}
}
/* Detecting touch events
*/
function touchMoveHandler(event){
var e = event.originalEvent;
// additional: if one of the normalScrollElements isn't within options.normalScrollElementTouchThreshold hops up the DOM chain
if ( !checkParentForNormalScrollElement(event.target) && isReallyTouch(e) ) {
var activeSection = $('.pp-section.active');
var scrollable = isScrollable(activeSection);
if(!scrollable.length){
event.preventDefault();
}
if (!isMoving()) {
var touchEvents = getEventsPage(e);
touchEndY = touchEvents.y;
touchEndX = touchEvents.x;
//$('body').append('<span style="position:fixed; top: 250px; left: 20px; z-index:88; font-size: 25px; color: #000;">touchEndY: ' + touchEndY + '</div>');
//X movement bigger than Y movement?
if (options.direction === 'horizontal' && Math.abs(touchStartX - touchEndX) > (Math.abs(touchStartY - touchEndY))) {
//is the movement greater than the minimum resistance to scroll?
if (Math.abs(touchStartX - touchEndX) > (container.width() / 100 * options.touchSensitivity)) {
if (touchStartX > touchEndX) {
scrolling('down', scrollable);
} else if (touchEndX > touchStartX) {
scrolling('up', scrollable);
}
}
} else {
if (Math.abs(touchStartY - touchEndY) > (container.height() / 100 * options.touchSensitivity)) {
if (touchStartY > touchEndY) {
scrolling('down', scrollable);
} else if (touchEndY > touchStartY) {
scrolling('up', scrollable);
}
}
}
}
}
}
/**
* recursive function to loop up the parent nodes to check if one of them exists in options.normalScrollElements
* Currently works well for iOS - Android might need some testing
* @param {Element} el target element / jquery selector (in subsequent nodes)
* @param {int} hop current hop compared to options.normalScrollElementTouchThreshold
* @return {boolean} true if there is a match to options.normalScrollElements
*/
function checkParentForNormalScrollElement (el, hop) {
hop = hop || 0;
var parent = $(el).parent();
if (hop < options.normalScrollElementTouchThreshold &&
parent.is(options.normalScrollElements) ) {
return true;
} else if (hop == options.normalScrollElementTouchThreshold) {
return false;
} else {
return checkParentForNormalScrollElement(parent, ++hop);
}
}
/**
* Creates a vertical navigation bar.
*/
function addVerticalNavigation(){
$('body').append('<div id="pp-nav"><ul></ul></div>');
var nav = $('#pp-nav');
nav.css('color', options.navigation.textColor);
nav.addClass(options.navigation.position);
for(var cont = 0; cont < $('.pp-section').length; cont++){
var link = '';
if(options.anchors.length){
link = options.anchors[cont];
}
if(options.navigation.tooltips !== 'undefined'){
var tooltip = options.navigation.tooltips[cont];
if(typeof tooltip === 'undefined'){
tooltip = '';
}
}
nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span></span></a></li>');
}
nav.find('span').css('border-color', options.navigation.bulletsColor);
}
/**
* Scrolls to the section when clicking the navigation bullet
*/
$(document).on('click touchstart', '#pp-nav a', function(e){
e.preventDefault();
var index = $(this).parent().index();
scrollPage($('.pp-section').eq(index));
});
/**
* Navigation tooltips
*/
$(document).on({
mouseenter: function(){
var tooltip = $(this).data('tooltip');
$('<div class="pp-tooltip ' + options.navigation.position +'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
},
mouseleave: function(){
$(this).find('.pp-tooltip').fadeOut(200, function() {
$(this).remove();
});
}
}, '#pp-nav li');
/**
* Activating the website navigation dots according to the given slide name.
*/
function activateNavDots(name, sectionIndex){
if(options.navigation){
$('#pp-nav').find('.active').removeClass('active');
if(name){
$('#pp-nav').find('a[href="#' + name + '"]').addClass('active');
}else{
$('#pp-nav').find('li').eq(sectionIndex).find('a').addClass('active');
}
}
}
/**
* Activating the website main menu elements according to the given slide name.
*/
function activateMenuElement(name){
if(options.menu){
$(options.menu).find('.active').removeClass('active');
$(options.menu).find('[data-menuanchor="'+name+'"]').addClass('active');
}
}
/**
* Checks for translate3d support
* @return boolean
* http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
*/
function support3d() {
var el = document.createElement('p'),
has3d,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'msTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'transform':'transform'
};
// Add it to the body to get the computed style.
document.body.insertBefore(el, null);
for (var t in transforms) {
if (el.style[t] !== undefined) {
el.style[t] = 'translate3d(1px,1px,1px)';
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
document.body.removeChild(el);
return (has3d !== undefined && has3d.length > 0 && has3d !== 'none');
}
/**
* Gets the translate3d property to apply when using css3:true depending on the `direction` option.
*/
function getTranslate3d(){
if (options.direction !== 'vertical') {
return 'translate3d(-100%, 0px, 0px)';
}
return 'translate3d(0px, -100%, 0px)';
}
};
})(jQuery, document, window);
jquery.pagepiling.css
/*!
* pagepiling.js 1.5.6
*
* https://github.com/alvarotrigo/pagePiling.js
* @license MIT licensed
*
* Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
*/
html, body {
overflow:hidden;
margin:0;
padding:0;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.pp-section {
height:100%;
position:absolute;
width:100%;
/* fixes flickering in firefox*/
backface-visibility: hidden;
}
.pp-easing {
-webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
}
#pp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
}
#pp-nav.right {
right: 17px;
}
#pp-nav.left {
left: 17px;
}
.pp-section.pp-table{
display: table;
}
.pp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.pp-slidesNav{
position: absolute;
z-index: 4;
left: 50%;
opacity: 1;
}
.pp-slidesNav.bottom {
bottom: 17px;
}
.pp-slidesNav.top {
top: 17px;
}
#pp-nav ul,
.pp-slidesNav ul {
margin: 0;
padding: 0;
}
#pp-nav li,
.pp-slidesNav li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position:relative;
}
.pp-slidesNav li {
display: inline-block;
}
#pp-nav li a,
.pp-slidesNav li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
}
#pp-nav li .active span,
.pp-slidesNav .active span {
background: #333;
}
#pp-nav span,
.pp-slidesNav 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;
}
.pp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
}
.pp-tooltip.right {
right: 20px;
}
.pp-tooltip.left {
left: 20px;
}
.pp-scrollable{
overflow-y: scroll;
height: 100%;
}
类似资料：