JS實現全屏頁面切換
阿新 • • 發佈:2019-01-04
var ismoving=false;//使頁面滾動時停止監聽滾輪事件
var pageH=document.documentElement.clientHeight;//獲得當前視窗高度
var allheight=document.documentElement.scrollHeight;//獲得頁面總高度
//滑鼠滾輪事件
var scrollFunc=function(e){
e=e||window.event;
if(ismoving){//當頁面正在滾動時停止監聽滾動事件
return ;
}else{
//判斷瀏覽器IE,谷歌滑輪事件(wheelDelta) FireFox滾輪事件(detail)
if(e.wheelDelta>0||e.detail<0){//當頁面向上滾動時
// alert("向上滑");
var current=window.pageYOffset;//獲取當前視窗顯示區左上角的Y位置
if(current==0){//當前頁面為第一頁時禁止向上滾動
return ;
}
pageScroll(-1,current);//執行滾動頁面函式
}
if(e.wheelDelta<0||e.detail>0){//當頁面向下滾動時
// alert("向下滑");
var current=window.pageYOffset;
if(current==allheight-pageH){//當前頁面為最後一頁時禁止向下滾動
return;
}
pageScroll(1,current);
}
}
}
//頁面視窗大小改變時重新獲取視窗高度
window.onresize=function(){
pageH=document.documentElement.clientHeight;
}
//繫結火狐瀏覽器的滾輪事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
//當滾輪發生時執行scrollFunc
window.onmousewheel=document.onmousewheel=scrollFunc;
// window.onmousewheel=scrollFunc;
//滾動頁面函式
var timer=null;
function pageScroll(speed,current){
ismoving=true;//表明當前頁面正在滾動
if(speed>0){//如果速度為正表明正在向下滾動
var allH=current+pageH;//獲得目標位置
//執行滾動的動畫效果
timer=setInterval(function(){
var cur=window.pageYOffset;//每次都重新獲取當前視窗顯示區左上角的Y位置
window.scrollTo(0,cur+speed);//讓頁面滾動到當前視窗Y加上speed的位置處
//為了讓滾動有ease-in-out的效果,當滾動的距離大於需要滾動的高度的一半時降低速度
if(cur > (allH-(pageH/2))){
speed--;
}else{
speed++;
}
//噹噹前視窗顯示區左上角Y位置超過了目標位置時
if(cur >= allH){
clearInterval(timer);//清除定時器
window.scrollTo(0,allH);//復原到目標位置
ismoving=false;//使滑鼠滾輪可以監聽
}
},15)
}else{
//速度為負,即向上滾動時,步驟同上
var allH=current-pageH;
timer=setInterval(function(){
var cur=window.pageYOffset;
window.scrollTo(0,cur+speed);
if(cur < (allH+(pageH/2))){
speed++;
}else{
speed--;
}
if(cur <= allH){
clearInterval(timer);
window.scrollTo(0,allH);
ismoving=false;
}
},15)
}
}