var isFF=/FireFox/i.test(navigator.userAgent);
var change = document.documentElement.clientHeight - 75;
var scrollHeight = document.body.scrollHeight - change -75;
var box = $('.wrapItem img').width();
$('.headNav').css('width',box+'px')
console.log(box)
var now = 0;
//如果不加时间控制,滚动会过度灵敏,一次翻好几屏
var startTime = 0, //翻屏起始时间
endTime = 0;
windowAddMouseWheel();
function windowAddMouseWheel() {
var scrollFunc = function (e) {
e = e || window.event;
startTime = new Date().getTime();
if ((endTime - startTime) < -1000){
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
now += change
if(now <= 0){
toPage(now)
}else{
now -= change
}
e.preventDefault();
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
now -= change
if(now >= -scrollHeight){
toPage(now)
}else{
now += change
}
e.preventDefault();
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时s
now -= change
if(now >= -scrollHeight){
toPage(now)
}else{
now += change
}
e.preventDefault();
}
if (e.detail< 0) { //当滑轮向下滚动时
now += change
if(now <= 0){
toPage(now)
}else{
now -= change
}
e.preventDefault();
}
}
endTime = new Date().getTime();
}else{
e.preventDefault();
}
};
//给页面绑定滑轮滚动事件
if (!isFF) {
document.addEventListener('mousewheel', scrollFunc, { passive: false })
}else{//火狐使用DOMMouseScroll绑定
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
// window.onmousewheel = document.onmousewheel = scrollFunc;
}
function toPage(now){
$("#contanier").animate({top:(now+'px')},700); //jquery实现动画效果
}
$('.nav a').on('click',function(){
var index = $('.nav a').index(this)
index > 1 ? (index+=2):''
now = -(index*change)
toPage(now)
})
window.onload = function(){
setTimeout(function(){
$(window).scrollTop(0)
},10)
}
效果图: