1 回到頂部es6版面向對象+原生JS實例
- 代碼：
- HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到頂部實例</title> <style> *{ margin: 0; padding: 0; list-style: none; } .wrap{ width: 1250px; margin: 10px auto; overflow: hidden; } .wrap ul{ width: 230px; margin: 10px; float: left; } .wrap ul li img{ width: 100%; } .wrap a{ position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 15px; font-weight: bold; color: black; border-radius: 50%; background-color: red; text-decoration: none; display: none; } </style> </head> <body> <div class="wrap" id="wrap"> <ul> <!--<li><img src="" realImg="" alt=""></li>--> </ul> <ul></ul> <ul></ul> <ul></ul> <ul></ul> <a href="javascript:void(0);">toTop</a> </div> <script src="JS/utils.js"></script> <script src="JS/banner.js"></script> <script> var f1=new Fand(); f1.init(); </script> </body> </html>- JS代碼：
class Fand { constructor(){ this.oWrap=document.getElementById("wrap"); this.aUl=this.oWrap.getElementsByTagName("ul"); this.aImg=this.oWrap.getElementsByTagName("img"); this.oBtn=this.oWrap.getElementsByTagName("a")[0]; this.data=null; this.timer=null; this.aSr=null; this.step=null; this.bOk=false; } init(){ //所有思維的調用 //獲取數(shù)據(jù) this.getData(); //創(chuàng)建50個li this.Li50(); //圖片懶加載 //添加滾輪事件 this.onScroll(); //回到頂部事件 this.toTop(); } //獲取數(shù)據(jù)函數(shù) getData(){ this.xml=new XMLHttpRequest(); this.xml.open("GET","data/data1.txt",false);//必須設置為同步 this.xml.onreadystatechange=()=> { if(this.xml.readyState==4&&/^2\d{2}$/.test(this.xml.status)){ this.data=utils.jsonParse(this.xml.responseText); } }; this.xml.send(); } //創(chuàng)建50個li，插入到頁面中 Li50(){ for(var i=0; i<50; i++){ this.oLi=document.createElement("li"); this.oLi.innerHTML=`<img src="" realImg="${this.data[utils.rnd(0,9)].imgSrc}" alt="">`; this.oLi.style.height=utils.rnd(80,200)+"px"; this.oLi.style.backgroundColor=`rgb(${utils.rnd(0,255)},${utils.rnd(0,255)},${utils.rnd(0,255)})`; this.oUl=utils.makeArray(this.aUl).sort(function (a,b) { a=a.offsetHeight; b=b.offsetHeight; return a-b; }); this.oUl[0].appendChild(this.oLi); } this.showImg(); } //圖片懶加載 showImg(){ for(var i=0; i<this.aImg.length; i++){ this.scrollTop=utils.win("scrollTop")+utils.win("clientHeight"); var imgOffset=utils.offset(this.aImg[i]).Top; if(imgOffset<=this.scrollTop){ this.lazyImg(this.aImg[i]); } } } lazyImg(img){ if(img.loaded) return; var frgImg=new Image(); frgImg.src=img.getAttribute("realImg"); frgImg.onload=function () { img.src=this.src; img.parentNode.style.height=img.offsetHeight+"px"; img.loaded=true; frgImg=null; }; frgImg.onerror=function () { img.backgroundColor="red"; img.loaded=true; frgImg=null; } } //滾輪事件 onScroll(){ window.onscroll=this.onScr.bind(this); } onScr(){ if(this.scrollTop+200>=document.body.scrollHeight){ this.Li50(); } this.showImg(); this.toTop2(); } onScr2(){ //添加滑輪滑動的時間與回到頂部定時器速度對比 if(this.bOk){ clearInterval(this.timer); window.onscroll=this.onScr.bind(this); return; } this.bOk=true; if(this.scrollTop+200>=document.body.scrollHeight){ this.Li50(); } this.showImg(); } //回到頂部 toTop(){ this.oBtn.onclick=(eve)=> { eve.target.style.display="none"; window.onscroll=this.onScr2.bind(this); this.aSr=utils.win("scrollTop"); var f=10; var v=10; this.step=f*v; this.timer=setInterval(this.toTop1.bind(this),30); } } toTop1(){ this.aSr=this.aSr-this.step; if(this.aSr<=0){ utils.win("scrollTop",0); clearInterval(this.timer); window.onscroll=this.onScr.bind(this); return; } utils.win("scrollTop",this.aSr); this.bOk=false; } //回到頂部升級1：按鈕在小于一屏的時候隱藏，在大于一屏的時候顯示； toTop2(){ this.aSr=utils.win("scrollTop"); if(this.aSr>=utils.win("clientHeight")){ this.oBtn.style.display="block"; }else{ this.oBtn.style.display="none"; } } }
2 回到頂部es6版面向對象+jQuery實例+繼承
- 面向對象的特點：
- 特點為：封裝，繼承，多態(tài)；
- 繼承目的是形成多個獨立的類函數(shù)，根據(jù)需求調用不同的函數(shù)；
- 類函數(shù)：5個
- 基礎版：Totop
- 知識點：在toTopp函數(shù)定義中，關閉定時器后設置
this.onScroll&&this.onScroll();，目的：判斷此時的this.onScroll是否存在，存在則執(zhí)行，不存在則無視，添加的目的是用于Quickhide回到頂部后添加滾輪事件； - 知識點2：事件中回調函數(shù)的this指向問題，可以通過bind()來改變；也可以用箭頭函數(shù)設置；
- 知識點：在toTopp函數(shù)定義中，關閉定時器后設置
- 升級版ShoworHide：繼承Totop，增加功能：大于一屏，按鈕顯示，小于一屏，按鈕隱藏；
- 知識點：在構造函數(shù)constructor中添加
this.ele.hide();,指的是頁面剛一加載，隱藏按鈕；優(yōu)點是：不改變原有Totop的設置，獨立開來;
- 知識點：在構造函數(shù)constructor中添加
- 升級版Quickhide：繼承ShoworHide，增加功能：點擊按鈕立即隱藏
- 知識點：利用off解除事件
$(window).off("scroll",this.shide);;
- 知識點：利用off解除事件
- 升級版Stopscroll：繼承ShoworHide，增加功能：滾動滑輪立即停止，無點擊按鈕立即隱藏功能；
- 知識點：開關思想bOk，比較定時器執(zhí)行速度與滾輪滑動速度，定時器一般設置為30ms以上，滾輪速度就能更快；
- 終級版Finastopscr：繼承Quickhide，增加功能：滾動滑輪立即停止
- 知識點：將Stopscroll類函數(shù)中的Stopscr()函數(shù)復制一份，但是區(qū)別在于，在停止定時器后，要執(zhí)行this.onScroll()函數(shù)，因為在Quickhide中，點擊按鈕，按鈕立即隱藏，此時滾動事件已經被解除，所以在滾輪滑動停止后，給scroll重新綁定this.shide函數(shù);
- 基礎版：Totop
- 代碼：
- JS代碼：
//1 回到頂部基礎版 class Totop{ constructor(opt){ opt=opt || {}; if(!opt.ele) return; this.ele=opt.ele; this.interval=opt.interval; this.step=null; this.scrollTop=null; this.timer=null; this.bOk=false; this.init(); } init(){ this.ele.click(()=> { this.scrollTop=$(window).scrollTop(); var f=30; this.step=f*this.interval; this.timer=setInterval(this.toTopp.bind(this),f); }) } toTopp(){ this.scrollTop-=this.step; if(this.scrollTop<=0){ $(window).scrollTop(0); clearInterval(this.timer); //判斷此時的this.onScroll是否存在，存在則執(zhí)行，不存在則無視，添加的目的是用于Quickhide回到頂部后添加滾輪事件； this.onScroll&&this.onScroll(); return; } $(window).scrollTop(this.scrollTop); this.bOk=false; } } //2 創(chuàng)建一個新的類函數(shù)繼承Totop函數(shù)，擴展顯示隱藏 class ShoworHide extends Totop{ constructor(opt){ super(opt);//繼承Totop類的所有屬性 //需要設置按鈕隱藏 this.ele.hide();//不改變原有類的設置，獨立開來 this.onScroll(); } onScroll(){ //添加滾輪事件，當滾動長度大于頁面可視區(qū)長度，按鈕顯示，小于則隱藏； //用on來綁定滾輪事件； $(window).on("scroll",this.shide=()=> { if($(window).scrollTop()>$(window).height()){ this.ele.show(); }else{ this.ele.hide(); } }) } } //3 繼承并擴展，擴展點擊后按鈕立即隱藏 class Quickhide extends ShoworHide{ constructor(opt){ super(opt); this.quickly(); } quickly(){ this.ele.click(()=>{ this.ele.hide(); //用off解除滾輪事件 $(window).off("scroll",this.shide); /* $(window).scroll(()=> { if($(window).scrollTop()<=0){ this.onScroll(); } });*/ }) } } //4 繼承并擴展，滑動滾輪隨時停下； class Stopscroll extends ShoworHide{ constructor(opt){ super(opt); this.Stopscr(); } Stopscr(){ $(window).scroll(()=>{ if(this.bOk){ clearInterval(this.timer); //在此處不必添加this.onScroll();因為onScroll()函數(shù)一直在運行，沒有被解除 } this.bOk=true; }); } } //5 繼承并擴展，點擊立即隱藏，滑動隨時停下，終極版 class Finastopscr extends Quickhide{ constructor(opt){ super(opt); this.Stopscr1(); } Stopscr1(){ $(window).scroll(()=>{ if(this.bOk){ $(window).off("scroll",this.shide); clearInterval(this.timer); //在此處必須添加 this.onScroll(); } this.bOk=true; }); } }- HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到頂部實例</title> <style> body{ width: 100%; height: 5000px; background-color: lightseagreen; } a{ position: fixed; right: 40px; bottom: 20px; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; background-color: red; text-decoration: none; color: black; font-size: 15px; } </style> </head> <body> <a href="javascript:void(0);">toTop</a> <script src="JS/jquery.js"></script> <script src="JS/totop.js"></script> <script> //1 只有回到頂部功能 var oTotop=new Totop({ ele:$("a"), interval:5,//為頻率 }); //2 回到頂部加顯示隱藏滾輪事件 var oTotop1=new ShoworHide({ ele:$("a"), interval:5,//為頻率 }); //3 點擊按鈕立即隱藏 var oTotop2=new Quickhide({ ele:$("a"), interval:5,//為頻率 }); //4 點擊按鈕不隱藏，但是可以隨時停下； var oTotop3=new Stopscroll({ ele:$("a"), interval:5,//為頻率 }); //5 點擊按鈕隱藏，并且可以隨時停下 var oTotop4=new Finastopscr({ ele:$("a"), interval:5,//為頻率 }); </script> </body> </html>
