第九周第一天笔记之toTop回到顶部实例
2018-09-20 本文已影响0人
果木山
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(){ //所有思维的调用 //获取数据 this.getData(); //创建50个li this.Li50(); //图片懒加载 //添加滚轮事件 this.onScroll(); //回到顶部事件 this.toTop(); } //获取数据函数 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(); } //创建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实例+继承
- 面向对象的特点：
- 特点为：封装，继承，多态；
- 继承目的是形成多个独立的类函数，根据需求调用不同的函数；
- 类函数：5个
- 基础版：Totop
- 知识点：在toTopp函数定义中，关闭定时器后设置
this.onScroll&&this.onScroll();，目的：判断此时的this.onScroll是否存在，存在则执行，不存在则无视，添加的目的是用于Quickhide回到顶部后添加滚轮事件； - 知识点2：事件中回调函数的this指向问题，可以通过bind()来改变；也可以用箭头函数设置；
- 知识点：在toTopp函数定义中，关闭定时器后设置
- 升级版ShoworHide：继承Totop，增加功能：大于一屏，按钮显示，小于一屏，按钮隐藏；
- 知识点：在构造函数constructor中添加
this.ele.hide();,指的是页面刚一加载，隐藏按钮；优点是：不改变原有Totop的设置，独立开来;
- 知识点：在构造函数constructor中添加
- 升级版Quickhide：继承ShoworHide，增加功能：点击按钮立即隐藏
- 知识点：利用off解除事件
$(window).off("scroll",this.shide);;
- 知识点：利用off解除事件
- 升级版Stopscroll：继承ShoworHide，增加功能：滚动滑轮立即停止，无点击按钮立即隐藏功能；
- 知识点：开关思想bOk，比较定时器执行速度与滚轮滑动速度，定时器一般设置为30ms以上，滚轮速度就能更快；
- 终级版Finastopscr：继承Quickhide，增加功能：滚动滑轮立即停止
- 知识点：将Stopscroll类函数中的Stopscr()函数复制一份，但是区别在于，在停止定时器后，要执行this.onScroll()函数，因为在Quickhide中，点击按钮，按钮立即隐藏，此时滚动事件已经被解除，所以在滚轮滑动停止后，给scroll重新绑定this.shide函数;
- 基础版：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是否存在，存在则执行，不存在则无视，添加的目的是用于Quickhide回到顶部后添加滚轮事件； this.onScroll&&this.onScroll(); return; } $(window).scrollTop(this.scrollTop); this.bOk=false; } } //2 创建一个新的类函数继承Totop函数，扩展显示隐藏 class ShoworHide extends Totop{ constructor(opt){ super(opt);//继承Totop类的所有属性 //需要设置按钮隐藏 this.ele.hide();//不改变原有类的设置，独立开来 this.onScroll(); } onScroll(){ //添加滚轮事件，当滚动长度大于页面可视区长度，按钮显示，小于则隐藏； //用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()函数一直在运行，没有被解除 } 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>
