全屏滾動
阿新 • • 發佈：2021-08-14
<!DOCTYPEhtml>
<htmllang="en">
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; list-style:none; }
.box{ position:relative; width:100vw; height:100vh; overflow:hidden; }
.fullpage{ position:absolute; top:0; left:0; }
section{ width:100vw; height:100vh; font-size:80px; display:flex; justify-content:center; align-items:center; color:#fff; }
.section_1{ background-color:aqua; }
.section_2{ background-color:skyblue; }
.section_3{ background-color:darksalmon; }
.section_4{ background-color:red; }
.section_5{ background-color:forestgreen; }
ul{ position:absolute; right:20px; top:50%; transform:translateY(-50%); width:18px; /*height:100px;*/ border-radius:5px; background-color:rgba(255,255,255,.7); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
ulli{ width:10px; height:10px; border-radius:50%; background-color:skyblue; }
ul.active{ background-color:red; } </style> </head>
<body> <divclass="box"> <divclass="fullpage"> <sectionclass="section_1"> 有在好好生活 </section> <sectionclass="section_2"> 過程用心結果隨緣 </section> <sectionclass="section_3"> 家人閒坐燈火可親 </section> <sectionclass="section_4"> 我將歸來萬馬千軍 </section> <sectionclass="section_5"> 放棄一定不難但堅持很酷 </section> </div>
<!--小圓點--> <ul> <!--<liclass="active"></li> <li></li> <li></li> <li></li> <li></li>--> </ul> </div> <scriptsrc="../tools.js"></script> <script> //獲取元素 constwrap=document.querySelector('.fullpage'); constsections=document.querySelectorAll('section'); constul=document.querySelector('ul') //動態設定小圓點 for(leti=0;i<sections.length;i++){ varli=document.createElement('li') if(i==0){ li.classList.add('active'); } ul.appendChild(li) } //動態設定小圓點父盒子的寬ul ul.style.height=li.offsetHeight*ul.children.length*2+'px'
//給wrap設定一個動態高度 wrap.style.height=sections.length*wrap.firstElementChild.offsetHeight+'px' //獲取滾動條的高度讓滑鼠滾動一視口的高 //視口高的索引 varindex=0 //獲取瀏覽器的視口高 varwh=window.innerHeight //為了防止動畫未完成點選過快造成的抖動而加鎖 varflag=true //新增一個滑鼠滾輪事件 window.onmousewheel=function(e){ if(!flag){ return } flag=false //vare=window.event||e if(e.deltaY>0){ index++ //deltaY大於0是向下 if(index>sections.length-1){ index=sections.length-1 } move(wrap,{ top:-index*wh },function(){ //動畫完成後在執行小圓點跟隨 //讓小圓點隨著屏的變動而變動 for(leti=0;i<ul.children.length;i++){ ul.children[i].classList.remove('active'); } ul.children[index].classList.add('active') flag=true }) }else{ index--; if(index<0){ index=0 } move(wrap,{ top:-index*wh },function(){ //動畫完成後在執行小圓點跟隨 //讓小圓點隨著屏的變動而變動 for(leti=0;i<ul.children.length;i++){ ul.children[i].classList.remove('active'); } ul.children[index].classList.add('active') flag=true }) } }
//點選小圓點 for(leti=0;i<ul.children.length;i++){ ul.children.onclick=function(){ if(!flag){ return } flag=false index=i; move(wrap,{ top:-index*wh },function(){ //動畫完成後在執行小圓點跟隨 //讓小圓點隨著屏的變動而變動 for(leti=0;i<ul.children.length;i++){ ul.children[i].classList.remove('active'); } ul.children[index].classList.add('active') flag=true }) } } /* 封裝獲取樣式的函式 @ele元素 @attr屬性 */ functiongetStyle(ele,attr){ if(window.getComputedStyle){ returnparseInt(window.getComputedStyle(ele)[attr]) }else{ //因為attr是個變數不是一個字串所以不能直接.鍵要用[] returnparseInt(ele.currentStyle[attr]) } } /* 運動封裝方法 @ele運動的元素 @aObj物件key是運動的屬性value是運動的目標值（終點） @cb是一個回撥函式 */ functionmove(ele,aObj,cb){ varobj={} for(letattrinaObj){ obj[attr]=setInterval(()=>{ //要獲取動態的當前位置 letoldStyle=getStyle(ele,attr) letstep=(aObj[attr]-oldStyle)/10; //判斷step為正負？ step>0?step=Math.ceil(step):step=Math.floor(step) //判斷是否走到目標位置 if(oldStyle===aObj[attr]){ clearInterval(obj[attr]) deleteobj[attr]; if(isEmptyObj(obj)){ //物件為空動畫結束 cb()//使用則個函式 } }else{ //沒走到目標位置 ele.style[attr]=oldStyle+step+'px' } },30); } } //3.通過ES6新增的一個Object.keys()方法 functionisEmptyObj(obj){ if(Object.keys(obj).length==0){ returntrue; }else{ returnfalse; } } </script> </body>
</html>
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; list-style:none; }
.box{ position:relative; width:100vw; height:100vh; overflow:hidden; }
.fullpage{ position:absolute; top:0; left:0; }
section{ width:100vw; height:100vh; font-size:80px; display:flex; justify-content:center; align-items:center; color:#fff; }
.section_1{ background-color:aqua; }
.section_2{ background-color:skyblue; }
.section_3{ background-color:darksalmon; }
.section_4{ background-color:red; }
.section_5{ background-color:forestgreen; }
ul{ position:absolute; right:20px; top:50%; transform:translateY(-50%); width:18px; /*height:100px;*/ border-radius:5px; background-color:rgba(255,255,255,.7); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
ulli{ width:10px; height:10px; border-radius:50%; background-color:skyblue; }
ul.active{ background-color:red; } </style> </head>
<body> <divclass="box"> <divclass="fullpage"> <sectionclass="section_1"> 有在好好生活 </section> <sectionclass="section_2"> 過程用心結果隨緣 </section> <sectionclass="section_3"> 家人閒坐燈火可親 </section> <sectionclass="section_4"> 我將歸來萬馬千軍 </section> <sectionclass="section_5"> 放棄一定不難但堅持很酷 </section> </div>
<!--小圓點--> <ul> <!--<liclass="active"></li> <li></li> <li></li> <li></li> <li></li>--> </ul> </div> <scriptsrc="../tools.js"></script> <script> //獲取元素 constwrap=document.querySelector('.fullpage'); constsections=document.querySelectorAll('section'); constul=document.querySelector('ul') //動態設定小圓點 for(leti=0;i<sections.length;i++){ varli=document.createElement('li') if(i==0){ li.classList.add('active'); } ul.appendChild(li) } //動態設定小圓點父盒子的寬ul ul.style.height=li.offsetHeight*ul.children.length*2+'px'
//給wrap設定一個動態高度 wrap.style.height=sections.length*wrap.firstElementChild.offsetHeight+'px' //獲取滾動條的高度讓滑鼠滾動一視口的高 //視口高的索引 varindex=0 //獲取瀏覽器的視口高 varwh=window.innerHeight //為了防止動畫未完成點選過快造成的抖動而加鎖 varflag=true //新增一個滑鼠滾輪事件 window.onmousewheel=function(e){ if(!flag){ return } flag=false //vare=window.event||e if(e.deltaY>0){ index++ //deltaY大於0是向下 if(index>sections.length-1){ index=sections.length-1 } move(wrap,{ top:-index*wh },function(){ //動畫完成後在執行小圓點跟隨 //讓小圓點隨著屏的變動而變動 for(leti=0;i<ul.children.length;i++){ ul.children[i].classList.remove('active'); } ul.children[index].classList.add('active') flag=true }) }else{ index--; if(index<0){ index=0 } move(wrap,{ top:-index*wh },function(){ //動畫完成後在執行小圓點跟隨 //讓小圓點隨著屏的變動而變動 for(leti=0;i<ul.children.length;i++){ ul.children[i].classList.remove('active'); } ul.children[index].classList.add('active') flag=true }) } }
//點選小圓點 for(leti=0;i<ul.children.length;i++){ ul.children.onclick=function(){ if(!flag){ return } flag=false index=i; move(wrap,{ top:-index*wh },function(){ //動畫完成後在執行小圓點跟隨 //讓小圓點隨著屏的變動而變動 for(leti=0;i<ul.children.length;i++){ ul.children[i].classList.remove('active'); } ul.children[index].classList.add('active') flag=true }) } } /* 封裝獲取樣式的函式 @ele元素 @attr屬性 */ functiongetStyle(ele,attr){ if(window.getComputedStyle){ returnparseInt(window.getComputedStyle(ele)[attr]) }else{ //因為attr是個變數不是一個字串所以不能直接.鍵要用[] returnparseInt(ele.currentStyle[attr]) } } /* 運動封裝方法 @ele運動的元素 @aObj物件key是運動的屬性value是運動的目標值（終點） @cb是一個回撥函式 */ functionmove(ele,aObj,cb){ varobj={} for(letattrinaObj){ obj[attr]=setInterval(()=>{ //要獲取動態的當前位置 letoldStyle=getStyle(ele,attr) letstep=(aObj[attr]-oldStyle)/10; //判斷step為正負？ step>0?step=Math.ceil(step):step=Math.floor(step) //判斷是否走到目標位置 if(oldStyle===aObj[attr]){ clearInterval(obj[attr]) deleteobj[attr]; if(isEmptyObj(obj)){ //物件為空動畫結束 cb()//使用則個函式 } }else{ //沒走到目標位置 ele.style[attr]=oldStyle+step+'px' } },30); } } //3.通過ES6新增的一個Object.keys()方法 functionisEmptyObj(obj){ if(Object.keys(obj).length==0){ returntrue; }else{ returnfalse; } } </script> </body>
</html>