参考了one-page.js。为了实现头部尾部效果。我认为很有必要自己写一下，不然用原有的插件我不知道如何实现想要的效果。写的太随意了。以后再做改正吧。
$(function() {
$('header').css({
marginTop: '-62px',
transition: "all .25s linear"
});
$('header').removeClass('visible')
var sections = $('.page')
var lastAnimation=0;
function init_scroll(event, delta) {
var leftPos = 0,
topPos = 0
var settings = {
direction: 'vertical',
}
$.each(sections, function(i) {
$(this).css({
position: "absolute",
top: topPos + "%"
}).attr("data-index", i + 1);
$(this).css({
position: "absolute",
left: (settings.direction == 'horizontal') ? leftPos + "%" : 0,
top: (settings.direction == 'vertical' || settings.direction != 'horizontal') ? topPos + "%" : 0
});
if (settings.direction == 'horizontal')
leftPos = leftPos + 100;
else
topPos = topPos + 100;
});
}
init_scroll()
//添加滚轮事件监听
$(document).on('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
event.preventDefault();
//处理浏览器兼容，判断滚轮方向
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var pos,current,next;
var timeNow = new Date().getTime();
//滚轮事件很容易被连续触发，这里通过获得最近一次触发事件的时间与上一次触发事件
//的时间相差的值与动画持续时间比较，若小于动画持续时间，则阻止滚轮事件
if(timeNow - lastAnimation < 500) {
event.preventDefault();
return;
}
if (delta < 0) { //滚轮向下滚动
if ($('header').hasClass('visible')) {
/*$('header').css({
marginTop: "-62px",
transition: "all .2s linear"
});
setTimeout(function(){$('header').removeClass('visible')},500) */
$('header').animate({
"marginTop": "-62px",
},
250, function() {
$('header').removeClass('visible')
});
// return false
}
else if(!$('header').hasClass('visible')) {
var index=$(".active").data('index'),
current=$(".page[data-index='" + index + "']"),
next=$(".page[data-index='" + (index + 1) + "']"),
length=$('.page').length;
console.log(length+1)
if (index<=length+1) {//如果存在下一屏
pos=(index * 100) * -1;
if (index<length) {
current.removeClass("active")
next.addClass("active")
}
$('.onepage-wrapper').css({
"-webkit-transform": "translate3d(0," + pos + "%, 0)",
"-moz-transform": "translate3d(0," + pos + "%, 0)",
"-ms-transform": "translate3d(0," + pos + "%, 0)",
"transform": "translate3d(0," + pos + "%, 0)",
"-webkit-transition": "all .5s linear",
"-moz-transition": "all .5s linear",
"-ms-transition": "all .5s linear",
"transition": "all .5s linear"
});
}
// else if (next.data('index')==length+1) {
// }
}
} else { //滚轮向上滚动
if ($('header').hasClass('visible')) return;
else if ($('.active').data("index") == 1 && !$('header').hasClass('visible')) {
$('header').addClass('visible')
/*$('header').css({
marginTop: "0px",
transition: "all .5s linear"
});*/
$('header').animate({
"marginTop": "0px",
},
250);
} else if ($('.active').data("index") > 1) {
/*$('header').css({
marginTop: "-62px",
transition: "all .5s linear"
});*/
index=$(".active").data('index'),
current=$(".page[data-index='" + index + "']"),
next=$(".page[data-index='" + (index - 1) + "']");
if (next.length>0) {//如果存在下一屏
pos = ((next.data("index") - 1) * 100) * -1;
current.removeClass("active")
next.addClass("active")
$('.onepage-wrapper').css({
"-webkit-transform": "translate3d(0," + pos + "%, 0)",
"-moz-transform": "translate3d(0," + pos + "%, 0)",
"-ms-transform": "translate3d(0," + pos + "%, 0)",
"transform": "translate3d(0," + pos + "%, 0)",
"-webkit-transition": "all .5s linear",
"-moz-transition": "all .5s linear",
"-ms-transition": "all .5s linear",
"transition": "all .5s linear"
});
}
}
}
lastAnimation = timeNow;
});
})
