Javascript 實(shí)現(xiàn)全屏滾動(dòng)實(shí)例代碼
JS 全屏滾動(dòng)
參照fullPage.js的效果,用自己的想法實(shí)現(xiàn)的。
實(shí)現(xiàn)的效果:1、全屏滾動(dòng),滾動(dòng)一下齒輪就會(huì)滾動(dòng)全屏。
2、自適應(yīng)縮放,無論怎么改變窗口的大小,都會(huì)保證用一個(gè)元素占滿全屏。
下一步計(jì)劃:
1、改成react組件
2、實(shí)現(xiàn)更多的效果
注釋寫的很清楚,基本上知道函數(shù)怎么用就可以了。有想法這東西就很簡單。
這里偷懶使用了我之前寫過的一個(gè)運(yùn)動(dòng)框架(其實(shí)就是一個(gè)函數(shù)),稍加修改就可以在這上面使用??蚣芟嚓P(guān):點(diǎn)擊這里
注釋非常詳細(xì)了,就不說其他的了。直接上代碼:
<!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> //添加滾動(dòng)監(jiān)聽 document.addEventListener('mousewheel',wheel,false); //判斷一次滾動(dòng)是是否完成 var isComplete = true; //隱藏滾動(dòng)條 document.body.style.overflow='hidden'; //獲取滾動(dòng)的元素 var fullList = document.getElementsByClassName("full"); //因?yàn)槭穷悢?shù)組對象,不是數(shù)組對象,所以只能使用call的方式來調(diào)用 Array.prototype.forEach.call(fullList,function(value){ //獲取一個(gè)網(wǎng)頁滿屏的高 value.style.height = window.innerHeight +'px'; }) //如果窗口大小改變執(zhí)行的函數(shù) window.onresize = function(){ Array.prototype.forEach.call(fullList,function(value){ value.style.height = window.innerHeight +'px'; }); //改變窗口大小后,應(yīng)該仍是一個(gè)元素占滿全屏 if(document.body.scrollTop % window.innerHeight) { isComplete = false; //根據(jù)四舍五入判斷滾動(dòng)位置 let tmp = Math.round(document.body.scrollTop / window.innerHeight)* window.innerHeight; //使用運(yùn)動(dòng)框架 showAnimate(document.body,{'scrollTop':tmp},function(){ isComplete = true; }); } }; //滾動(dòng)函數(shù) function wheel(e){ //等待上一個(gè)滾動(dòng)完成 if(isComplete){ //滾動(dòng)進(jìn)行時(shí) isComplete = false; //判斷是往上滾動(dòng)還是往下滾動(dòng) if(e.wheelDelta < 0){ //要滾動(dòng)到的點(diǎn) let arrivePoint = document.body.scrollTop + window.innerHeight; //最大的滾動(dòng)點(diǎn) let maxBottom = document.body.offsetHeight - window.innerHeight; //如果超出了最大的滾動(dòng)點(diǎn),則賦值為最大滾動(dòng)點(diǎn) arrivePoint = arrivePoint > maxBottom ? maxBottom : arrivePoint; showAnimate(document.body,{'scrollTop':arrivePoint},function(){ isComplete = true; }); }else{ let arrivePoint = document.body.scrollTop - window.innerHeight; //最小滾動(dòng)點(diǎn)為0 arrivePoint = arrivePoint < 0 ? 0 :arrivePoint; showAnimate(document.body,{'scrollTop':arrivePoint},function(){ isComplete = true; }); } } } /** *函數(shù)作用:執(zhí)行動(dòng)畫 *接受參數(shù):obj(需要運(yùn)動(dòng)的DOM元素) * json(需要改變的屬性集合,json格式) * fn(回調(diào)函數(shù)) */ function showAnimate(obj,json,fn){ clearInterval(obj.timer); //表示運(yùn)動(dòng)是否都已經(jīng)停止 var flag = true; obj.timer=setInterval(function(){ //循環(huán)json for(var i in json){ if(i == 'opacity'){ //獲取透明度值,round四舍五入去除小數(shù)點(diǎn) var icur = Math.round(parseFloat(getStyle(obj,i))*100); } else{ //獲取屬性值 var icur = parseInt(getStyle(obj,i))||obj[i]; } //緩沖運(yùn)動(dòng),speed隨時(shí)變換 var speed = (json[i]-icur)/10;//千萬要寫在定時(shí)器里面,寫在外面會(huì)有意想不到的后果 speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);//速度向上或者下取整,防止到不了over位置 //如果有一個(gè)沒到達(dá)終點(diǎn)就是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]); } //檢查是否所有的運(yùn)動(dòng)都已經(jīng)停止 if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },13); } /** *函數(shù)作用:返回樣式屬性值 *接受參數(shù):obj(需要獲取屬性的DOM元素) * attr(需要獲取的屬性名稱) */ function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr];//IE兼容 } else { return getComputedStyle(obj,false)[attr]; } } </script> </html>
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 原生javascript實(shí)現(xiàn)的全屏滾動(dòng)功能示例
- JavaScript全屏和退出全屏事件總結(jié)(附代碼)
- fullPage.js和CSS3實(shí)現(xiàn)全屏滾動(dòng)效果
- 原生js實(shí)現(xiàn)類似fullpage的單頁/全屏滾動(dòng)
- JS實(shí)現(xiàn)全屏的四種寫法
- jQuery插件fullPage.js實(shí)現(xiàn)全屏滾動(dòng)效果
- JS 全屏和退出全屏詳解及實(shí)例代碼
- 全屏滾動(dòng)插件fullPage.js使用實(shí)例解析
- 淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問題
- js實(shí)現(xiàn)各瀏覽器全屏代碼實(shí)例
相關(guān)文章
js+css實(shí)現(xiàn)超簡潔的二級下拉菜單效果代碼
這篇文章主要介紹了js+css實(shí)現(xiàn)超簡潔的二級下拉菜單效果代碼,通過非常簡單的JavaScript遍歷頁面元素及動(dòng)態(tài)設(shè)置樣式達(dá)到二級下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09uniapp動(dòng)態(tài)修改元素節(jié)點(diǎn)樣式詳解
這篇文章主要介紹了uni-app動(dòng)如何態(tài)修改元素節(jié)點(diǎn)樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08深入理解javascript構(gòu)造函數(shù)和原型對象
對象,是javascript中非常重要的一個(gè)梗,是否能透徹的理解它直接關(guān)系到你對整個(gè)javascript體系的基礎(chǔ)理解,說白了,javascript就是一群對象在攪。。(嗶?。?。2014-09-09FireBug 調(diào)試JS入門教程 如何調(diào)試JS
這篇文章主要為大家介紹下通過firefox的FireBug調(diào)試JS,需要的朋友可以參考下2013-12-12stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫,它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu):streams2011-10-10javascript DOM編程實(shí)例(智播客學(xué)習(xí))
最近一直在努力學(xué)習(xí)DOM編程這塊,這是目前成就感最強(qiáng)烈的一塊了,畢老師很認(rèn)真的給我們講解了相關(guān)知識,并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁作為例程給我們進(jìn)行講解2009-11-11DOM_window對象屬性之--clipboardData對象操作代碼
clipboardData 對象提供了對于預(yù)定義的剪貼板格式的訪問,以便在編輯操作中使用。2011-02-02