JS 全屏滾動
參照fullPage.js的效果，用自己的想法實現的。
實現的效果：1、全屏滾動，滾動一下齒輪就會滾動全屏。
2、自適應縮放，無論怎么改變窗口的大小，都會保證用一個元素占滿全屏。
下一步計劃：
1、改成react組件
2、實現更多的效果
注釋寫的很清楚，基本上知道函數怎么用就可以了。有想法這東西就很簡單。
這里偷懶使用了我之前寫過的一個運動框架（其實就是一個函數），稍加修改就可以在這上面使用。框架相關：點擊這里
注釋非常詳細了，就不說其他的了。直接上代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title></head><style> *{ margin: 0; padding: 0; } div{ width: 100%; height: 100%; } .one{ background-color: #1bbc9b; } .sec{ background-color: #4bbfc3; } .thr{ background-color: #7baabe; }</style><body> <div class="full one">1</div> <div class="full sec">2</div> <div class="full thr">3</div></body><script>//添加滾動監聽document.addEventListener('mousewheel',wheel,false);//判斷一次滾動是是否完成var isComplete = true;//隱藏滾動條document.body.style.overflow='hidden';//獲取滾動的元素var fullList = document.getElementsByClassName("full");//因為是類數組對象，不是數組對象，所以只能使用call的方式來調用Array.prototype.forEach.call(fullList,function(value){ //獲取一個網頁滿屏的高 value.style.height = window.innerHeight +'px';})//如果窗口大小改變執行的函數window.onresize = function(){ Array.prototype.forEach.call(fullList,function(value){ value.style.height = window.innerHeight +'px'; }); //改變窗口大小后，應該仍是一個元素占滿全屏 if(document.body.scrollTop % window.innerHeight) { isComplete = false; //根據四舍五入判斷滾動位置 let tmp = Math.round(document.body.scrollTop / window.innerHeight)* window.innerHeight; //使用運動框架 showAnimate(document.body,{'scrollTop':tmp},function(){ isComplete = true; }); }};//滾動函數function wheel(e){ //等待上一個滾動完成 if(isComplete){ //滾動進行時 isComplete = false; //判斷是往上滾動還是往下滾動 if(e.wheelDelta < 0){ //要滾動到的點 let arrivePoint = document.body.scrollTop + window.innerHeight; //最大的滾動點 let maxBottom = document.body.offsetHeight - window.innerHeight; //如果超出了最大的滾動點，則賦值為最大滾動點 arrivePoint = arrivePoint > maxBottom ? maxBottom : arrivePoint; showAnimate(document.body,{'scrollTop':arrivePoint},function(){ isComplete = true; }); }else{ let arrivePoint = document.body.scrollTop - window.innerHeight; //最小滾動點為0 arrivePoint = arrivePoint < 0 ? 0 :arrivePoint; showAnimate(document.body,{'scrollTop':arrivePoint},function(){ isComplete = true; }); } }}/***函數作用：執行動畫*接受參數：obj（需要運動的DOM元素）* json（需要改變的屬性集合，json格式）* fn（回調函數）*/function showAnimate(obj,json,fn){ clearInterval(obj.timer); //表示運動是否都已經停止 var flag = true; obj.timer=setInterval(function(){ //循環json for(var i in json){ if(i == 'opacity'){ //獲取透明度值，round四舍五入去除小數點 var icur = Math.round(parseFloat(getStyle(obj,i))*100); } else{ //獲取屬性值 var icur = parseInt(getStyle(obj,i))||obj[i]; } //緩沖運動，speed隨時變換 var speed = (json[i]-icur)/10;//千萬要寫在定時器里面，寫在外面會有意想不到的后果 speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);//速度向上或者下取整，防止到不了over位置 //如果有一個沒到達終點就是false if(json[i] !== icur){ flag = false; }else{ flag = true; } if(i == 'opacity'){ obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';//IE兼容 obj.style.opacity = (icur+speed)/100; }else if(obj[i]||obj[i] == 0){ obj[i] = icur + speed; } else{ obj.style[i] = icur+speed+'px'; } console.log(icur + ' ' + json[i]); } //檢查是否所有的運動都已經停止 if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },13);}/***函數作用：返回樣式屬性值*接受參數：obj（需要獲取屬性的DOM元素）* attr（需要獲取的屬性名稱）*/function getStyle(obj,attr){ if(obj.currentStyle) { return obj.currentStyle[attr];//IE兼容 } else { return getComputedStyle(obj,false)[attr]; }}</script></html>感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
