@EncyKe
2016-11-04T07:01:52.000000Z
字数 16277
阅读 2754
前端
JavaScript
<div id="fullpage">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">
<div class="slide" style="text-align:center;color:#fff;">3.1</div>
<div class="slide" style="text-align:center;color:#fff;">3.2</div>
<div class="slide" style="text-align:center;color:#fff;">3.3</div>
<div class="slide" style="text-align:center;color:#fff;">3.4</div>
</div>
<div class="section">4</div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.js"></script>
<script type="text/javascript">
$(function(){
$('#fullpage').fullpage({
// 按顺序定义每一section的背景颜色;
sectionsColor:['green','orange','gray','red'],
// 是否通过箭头控制slider幻灯片,默认为true;
controlArrows: true,
// 每一页内容是否垂直居中,默认为true;
verticalCentered: true,
// 字体是否随着窗口缩放,默认为false;
resize: false,
// 定义滚动速度,单位毫秒,默认为700;
scrollingSpeed: 700,
// 按顺序为每一section定义锚,定义时不需加#,值不可以与页面现有的id、name相同;
anchors: ['p1','p2','p3','p4'],
// 是否锁定锚链接,默认为false;若设为true,滚动页面时链接不发生变化;
lockAnchors: false,
// 定义滚动的动画方式,需引入jQuery UI或jQuery.easings才可使用;
// easing: easeInOutCubic,
// 是否使用CSS3 transform来实现滚动效果,默认为true;
css3: true,
// 滚动至顶部后是否连续滚动至底部,默认为false;
loopTop: false,
// 滚动至底部后是否连续滚动至顶部,默认为false;
loopBottom: false,
// slide是否循环滚动,默认为true;
loopHorizontal: true,
// 是否使用滚动方式,默认为true;若设为false,则会出现浏览器自带滚动条,且不按页滚动;
autoScrolling: true,
// 是否包含滚动条,默认为false;若设为true,则会有滚动条出现,但仍旧按页滚动;
scrollBar: false,
// 定义每一section顶部和底部padding;一般与fixedElement固定项搭配使用;
paddingTop: 0,
paddingBottom: 0,
// 定义固定项,可配置一个jQuery选择器,使之固定不动;
fixedElements: null,
// 是否使用键盘方向键,默认为true;
keyboardScrolling: true,
// 定义移动端的滑动敏感度,默认为5,越大越难滑动;
touchSensitivity: 5,
// 是否循环滚动,默认为false;若设为true,则页面循环滚动,与loopTop、loopBottom不兼容;
continuousVertical: false,
// 锚链接是否可以控制滚动动画,默认为true;若设为false,则锚链接定位不再有动画;
animateAnchor: true,
// 是否记录历史,可通过浏览器历史前进后退来导航,默认为true;
recordHistory: true,
// 定义绑定菜单,可配置菜单的jQuery选择器,默认为false;
menu: false,
// 是否显示导航,默认为false;若设为true,将显示小圆点;
navigation: false,
// 定义小圆点位置,可为left、right等值;
navigationPosition: '',
// 按顺序定义小圆点的tooltip内容;
navigationTooltips: ['p1','p2','p3','p4'],
// 是否显示当前页导航的tooltip信息,默认为false;
showActiveTooltip: false,
// 是否显示slide的导航,默认为false;
slidesNavigation: false,
// slide的位置,默认为bottom,可设为top等;
slidesNavPosition: 'bottom',
// 内容超过满屏时是否显示滚动条,默认为false;若设为true,则显示滚动条,但需要引入jQuery.slimscroll.js;
scrollOverFlow: false,
// 定义section的选择器,默认为.section;
sectionSelector: '.section',
// 定义slide的选择器,默认为.slide;
slideSelector: '.slide',
});
});
/*
方法:$fn.fullpage.xxx()
moveSectionDown():向上滚动一页;
moveSectionUp():向下滚动一页;
moveTo(section,slide):滚动至某section(自1起),某slide(自0起);
slientMoveTo(sec1,length0):与moveTo同,无动画效果;
moveSlideLeft():slide向左滚动;
moveSlideRight():slide向右滚动;
setAutoScrolling(boolean):动态设置指定项;
setLockAnchors(boolean):动态设置指定项;
setRecordHistory(boolean):动态设置指定项;
setScrollingSpeed(ms):动态设置指定项;
setAllowScrolling(boolean,[directions]):添加/删除鼠标滚轮、滑动控制,true为启用,方向参数可谓all, up, down, left, right,可多个,逗号分隔;
destroy(type/all):销毁fullpage特效,默认为type,保留样式,无动效;若为all,则等同于裸奔;
reBuild():重新更新页面和尺寸;
afterLoad: function(anchorLink, index){}:滚动至指定锚链接后,触发一次回调函数;
onLeave: function(index,nextIndex,direction){}:离开指定锚链接后,触发一次回调函数;index为离开的页面序号,nextIndex为滚动至的页面序号,方向参数为up、down;由return false;可取消滚动;
afterRender():页面初始化后的回调函数;
afterResize():页面尺寸变化后的回调函数;
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}:滚动至指定slide后,触发一次回调函数;
onSliderLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}:离开指定slide后,触发一次回调函数;
*/
</script>
<div id="container">
<div class="section active" id="section0">
<div class="intro">
<h1 class="title">switchPage</h1>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
</div>
<div class="section" id="section1">
<div class="intro">
<h1 class="title">Example</h1>
<p>HTML markup example to define 4 sections</p>
<img src="images/example.png"/>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1 class="title">Example</h1>
<p>The plug-in configuration parameters</p>
<img src="images/example2.png"/>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1 class="title">THE END</h1>
<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
</div>
</div>
</div>
h1,body,html{
padding: 0;
margin: 0;
}
body{
font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
}
html,body{
height: 100%;
overflow: hidden;
}
h1{
font-size: 6em;
font-weight: normal;
}
p{
font-size: 2em;
margin:0.5em 0 2em 0;
}
#container,.section{
height: 100%;
position: relative;
}
#section0,
#section1,
#section2,
#section3{
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
#section0{
background-image: url(images/1.jpg);
color: #fff;
text-shadow:1px 1px 1px #333;
}
#section1{
color: #fff;
text-shadow:1px 1px 1px #333;
background-image: url(images/2.jpg);
}
#section2{
background-image: url(images/3.jpg);
color: #fff;
text-shadow:1px 1px 1px #666;
}
#section3{
color: #008283;
background-image: url(images/4.jpg);
text-shadow:1px 1px 1px #fff;
}
#section0 p{
color: #F1FF00;
}
#section3 p{
color: #00A3AF;
}
.left{
float: left;
}
.intro{
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
#pages{
position:fixed;
right: 10px;
top: 50%;
list-style: none;
}
#pages li{
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 0 0 10px 5px;
}
#pages li.active{
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}
#section0 .title{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
animation: sectitle0 1s ease-in-out 100ms forwards;
}
#section0 p{
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-animation: sec0 1s ease-in-out 100ms forwards;
animation: sec0 1s ease-in-out 100ms forwards;
}
@-webkit-keyframes sectitle0{
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes sectitle0{
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes sec0{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes sec0{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
$(function(){
$("#container").switchPage({
'loop' : true,
'keyboard' : true,
'direction' : 'horizontal'
});
});
(function ($) {
//判断浏览器含有属性类型
var _prefix = (function (temp) {
var prefix = ["webkit", "Moz", "o", "ms"];
var props = "";
for (var i = 0; i < prefix.length; i++) {
props = prefix[i] + "Transition";
if (temp.style[props] !== undefined) {
return "-" + prefix[i].toLowerCase() + "-";
}
}
return false;
//猜测这里是随意创造一个节点,然后尝试判断该节点是否可以拥有该属性
})(document.createElement(PageSwitch));
//在这个函数类定义PageSwitch这个类
var PageSwitch = (function () {
//在这里传递进来的element代表的是一个jquery单对象,这里就是id为container的jquery对象
//this指代的就是这个当前引用创建的PageSwitch的对象,实际上指代的就是前面的instance对象
function PageSwitch(element, options) {
this.settings = $.extend(true, $.fn.PageSwitch.defaults, options || {});
this.element = element;
this.init();
}
//以下为定义PageSwitch的方法
PageSwitch.prototype = {
init : function () {
//现在这里的this指的是一个变量,它保存有的jqueryDOM元素是id为container的div
var me = this;
//定位到默认的selectors的变量
me.containers = me.settings.containers;
//查找到符合情况的jquery元素
me.sections = me.element.find(me.containers.sections);
me.section = me.sections.find(me.containers.section);
me.vertical = me.settings.vertical;
me.pagesCounts = me.pageCount();
me.activeIndex = (me.settings.activeIndex >= 0 && me.settings.activeIndex < me.pagesCounts) ? me.settings.activeIndex : 0;
//添加事件
me.canScroll = true;
if (!me.vertical) {
me._initLayout();
}
if (me.settings.pagination) {
me._initPage();
}
me._initEvent();
},
//获取有多少页
pageCount : function () {
return this.section.length;
},
//获取一个屏的长度或者高度
switchLength : function () {
return this.direction ? this.element.height() : this.element.width();
},
//页码条初始化
_initPage : function () {
var me = this;
var pageClass = me.containers.page.substring(1);
me.activeClass = me.containers.activeClass.substring(1);
var pageHTML = "<ul class='" + pageClass + "'>";
for (var i = 0; i < me.pagesCounts; i++) {
pageHTML += "<li></li>";
}
pageHTML += "</ul>";
me.element.append(pageHTML);
var pages = me.element.find("ul" + me.containers.page);
me.pageItem = pages.find("li");
me.pageItem.eq(0).addClass(me.activeClass);
},
_initLayout : function () {
var me = this;
var width = (me.pagesCounts * 100) + "%";
var cellWidth = (100 / me.pagesCounts).toFixed(2) + "%";
//这里采用sections,因为使用transition的时候,就是使用sections的div进行相对位移的
me.sections.width(width);
me.section.width(cellWidth).addClass("left");
},
//加载事件监听器
_initEvent : function () {
var me = this;
//加载页码点击监听器
if (me.pagination) {
me.element.find(me.containers.page + " li").on("click", function () {
me.activeIndex = $(this).index();
me._scrollPage();
});
}
//页面点击监听:点击页码产生下一页
me.sections.on("click", function () {
me._nextPage();
});
//设置鼠标滚轮事件
me.element.on("mousewheel DOMMouseScroll", function (e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.wheelDelta;
if (delta > 0 && (me.activeIndex && !me.settings.loop || me.settings.loop)) {
me._prevPage();
} else if (delta < 0 && (me.activeIndex < (me.pagesCount - 1) && !me.settings.loop || me.settings.loop)) {
me._nextPage();
}
}
);
//设置键盘方向键事件
if (me.settings.keyboard) {
$(window).on("keypress", function (e) {
var keyCode = e.keyCode;
if (keyCode == 37 || keyCode == 38) {
me._prevPage();
} else if (keyCode == 39 || keyCode == 40) {
me._nextPage();
}
});
}
//浏览器窗口大小改变触发的事件
$(window).resize(function () {
var currentLength = me.switchLength();
var offset = me.settings.vertical ? me.section.eq(me.activeIndex).offset().top : me.section.eq(me.activeIndex).offset().left;
if (Math.abs(offset) > currentLength / 2 && me.activeIndex < (me.pagesCounts - 1)) {
me.activeIndex++;
}
if (me.activeIndex) {
me._scrollPage();
}
}
);
//当动画Transition的css动画执行完毕后,调用该事件方法
me.sections.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function () {
me.canScroll = true;
if (me.settings.onPageSwitch && $.type(me.settings.onPageSwitch) == "function") {
me.settings.onPageSwitch();
}
})
},
//上一页
_prevPage : function () {
var me = this;
//在这里判断是否可以上一页(动画是否播放完毕),在这里的原因是:如果不能进行上一页,则不做改变,activeIndex不会改变,
//但如果在_scrollPage()方法里面判断,此时activeIndex已经改变,但如果scrollPanel为false,则下一次滚动会跳页
if (me.canScroll) {
if (me.activeIndex > 0) {
me.activeIndex--;
} else if (me.settings.loop) {
me.activeIndex = me.pagesCounts - 1;
}
me._scrollPage();
}
},
//上一页
_nextPage : function () {
var me = this;
if (me.canScroll) {
if (me.activeIndex < me.pagesCounts - 1) {
me.activeIndex++;
} else if (me.settings.loop) {
me.activeIndex = 0;
}
me._scrollPage();
}
}
,
//其实本质就是activeIndex被更改了,然后在这里修改相印的样式
_scrollPage : function () {
var me = this;
var activeFace = me.section.eq(me.activeIndex).position();
if (!activeFace)return;
me.canScroll = false;
//拥有该样式
if (_prefix) {
me.sections.css(_prefix + "transition", "all " + me.settings.duration + "ms " + me.settings.easing);
var translate = me.vertical ? "translateY(-" + activeFace.top + "px)" : "translateX(-" + activeFace.left + "px)";
me.sections.css(_prefix + "transform", translate);
} else {
var animateCss = me.direction ? {top : -activeFace.top} : {left : -activeFace.left};
me.sections.animate(animateCss, me.settings.duration, function () {
me.canScroll = true;
if (me.settings.onPageSwitch && $.type(me.settings.onPageSwitch) == "function") {
me.settings.onPageSwitch();
}
})
}
if (me.settings.pagination) {
me.pageItem.eq(me.activeIndex).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
}
}
};
return PageSwitch;
})();
//把这个类作为一个函数闭包(插件)添加到jQuery中
$.fn.PageSwitch = function (options) {
console.log("start");
//对选中的jquery容器做一个循环,依次调用里面的元素
return this.each(function () {
var me = $(this);
var instance = me.data("PageSwitch");
if (!instance) {
instance = new PageSwitch(me, options);
me.data("PageSwitch", instance);
}
//如果传进来的不是对象而是字符串,则调用这个方法
if ($.type(options) === "string")return instance[options]();
})
};
//定义一个默认配置
$.fn.PageSwitch.defaults = {
containers : {
container : "#container",//容器
sections : ".sections",//第二层
section : ".section",//子节点层
intro : ".intro",//装载页面的内容
page : ".pages",//页码条ul
activeClass : ".active"//被激活的页码条
},
activeIndex : 0,//默认起始页面
easing : "ease-in-out",//特效方式,ease-in,ease-out,linear
duration : 1000,//每次动画执行的时间
pagination : true,//是否显示分页,右边中间的分页条
loop : true,//是否循环
keyboard : true,//是否支持键盘
vertical : true,//滑动方向,默认为true,或者false(horizontal)
onPageSwitch : ""//换页回调函数
};
$("#container").PageSwitch({
loop : true,
vertical : false
});
})
(jQuery);
(function($){
var defaults = {
'container' : '#container',//容器
'sections' : '.section',//子容器
'easing' : 'ease',//特效方式,ease-in,ease-out,linear
'duration' : 1000,//每次动画执行的时间
'pagination' : true,//是否显示分页
'loop' : false,//是否循环
'keyboard' : true,//是否支持键盘
'direction' : 'vertical',//滑动的方向 horizontal,vertical,
'onpageSwitch' : function(pagenum){}
};
var win = $(window),
container,sections;
var opts = {},
canScroll = true;
var iIndex = 0;
var arrElement = [];
var SP = $.fn.switchPage = function(options){
opts = $.extend({}, defaults , options||{});
container = $(opts.container),
sections = container.find(opts.sections);
sections.each(function(){
arrElement.push($(this));
});
return this.each(function(){
if(opts.direction == "horizontal"){
initLayout();
}
if(opts.pagination){
initPagination();
}
if(opts.keyboard){
keyDown();
}
});
}
//滚轮向上滑动事件
SP.moveSectionUp = function(){
if(iIndex){
iIndex--;
}else if(opts.loop){
iIndex = arrElement.length-1;
}
scrollPage(arrElement[iIndex]);
};
//滚轮向下滑动事件
SP.moveSectionDown = function(){
if(iIndex<(arrElement.length-1)){
iIndex++;
}else if(opts.loop){
iIndex = 0;
}
scrollPage(arrElement[iIndex]);
};
//私有方法
//页面滚动事件
function scrollPage(element){
var dest = element.position();
if(typeof dest === 'undefined'){ return; }
initEffects(dest,element);
}
//重写鼠标滑动事件
$(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
function MouseWheelHandler(e) {
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var delta = Math.max(-1, Math.min(1, value));
if(canScroll){
if (delta < 0) {
SP.moveSectionDown();
}else {
SP.moveSectionUp();
}
}
return false;
}
//横向布局初始化
function initLayout(){
var length = sections.length,
width = (length*100)+"%",
cellWidth = (100/length).toFixed(2)+"%";
container.width(width).addClass("left");
sections.width(cellWidth).addClass("left");
}
//初始化分页
function initPagination(){
var length = sections.length;
if(length){
}
var pageHtml = '<ul id="pages"><li class="active"></li>';
for(var i=1;i<length;i++){
pageHtml += '<li></li>';
}
pageHtml += '</ul>';
$("body").append(pageHtml);
}
//分页事件
function paginationHandler(){
var pages = $("#pages li");
pages.eq(iIndex).addClass("active").siblings().removeClass("active");
}
//是否支持css的某个属性
function isSuportCss(property){
var body = $("body")[0];
for(var i=0; i<property.length;i++){
if(property[i] in body.style){
return true;
}
}
return false;
}
//渲染效果
function initEffects(dest,element){
var transform = ["-webkit-transform","-ms-transform","-moz-transform","transform"],
transition = ["-webkit-transition","-ms-transition","-moz-transition","transition"];
canScroll = false;
if(isSuportCss(transform) && isSuportCss(transition)){
var traslate = "";
if(opts.direction == "horizontal"){
traslate = "-"+dest.left+"px, 0px, 0px";
}else{
traslate = "0px, -"+dest.top+"px, 0px";
}
container.css({
"transition":"all "+opts.duration+"ms "+opts.easing,
"transform":"translate3d("+traslate+")"
});
container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend",function(){
canScroll = true;
});
}else{
var cssObj = (opts.direction == "horizontal")?{left: -dest.left}:{top: -dest.top};
container.animate(cssObj, opts.duration, function(){
canScroll = true;
});
}
element.addClass("active").siblings().removeClass("active");
if(opts.pagination){
paginationHandler();
}
}
//窗口Resize
var resizeId;
win.resize(function(){
clearTimeout(resizeId);
resizeId = setTimeout(function(){
reBuild();
},500);
});
function reBuild(){
var currentHeight = win.height(),
currentWidth = win.width();
var element = arrElement[iIndex];
if(opts.direction == "horizontal"){
var offsetLeft = element.offset().left;
if(Math.abs(offsetLeft)>currentWidth/2 && iIndex <(arrElement.length-1)){
iIndex ++;
}
}else{
var offsetTop = element.offset().top;
if(Math.abs(offsetTop)>currentHeight/2 && iIndex <(arrElement.length-1)){
iIndex ++;
}
}
if(iIndex){
paginationHandler();
var cuerrentElement = arrElement[iIndex],
dest = cuerrentElement.position();
initEffects(dest,cuerrentElement);
}
}
//绑定键盘事件
function keyDown(){
var keydownId;
win.keydown(function(e){
clearTimeout(keydownId);
keydownId = setTimeout(function(){
var keyCode = e.keyCode;
if(keyCode == 37||keyCode == 38){
SP.moveSectionUp();
}else if(keyCode == 39||keyCode == 40){
SP.moveSectionDown();
}
},150);
});
}
})(jQuery);