美文网首页web基础学习之路
第九周第一天笔记之toTop回到顶部实例

第九周第一天笔记之toTop回到顶部实例

作者: 果木山 | 来源:发表于2018-09-20 10:14 被阅读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个
    1. 基础版:Totop
      • 知识点:在toTopp函数定义中,关闭定时器后设置this.onScroll&&this.onScroll();,目的:判断此时的this.onScroll是否存在,存在则执行,不存在则无视,添加的目的是用于Quickhide回到顶部后添加滚轮事件;
      • 知识点2:事件中回调函数的this指向问题,可以通过bind()来改变;也可以用箭头函数设置;
    2. 升级版ShoworHide:继承Totop,增加功能:大于一屏,按钮显示,小于一屏,按钮隐藏;
      • 知识点:在构造函数constructor中添加this.ele.hide();,指的是页面刚一加载,隐藏按钮;优点是:不改变原有Totop的设置,独立开来;
    3. 升级版Quickhide:继承ShoworHide,增加功能:点击按钮立即隐藏
      • 知识点:利用off解除事件$(window).off("scroll",this.shide);;
    4. 升级版Stopscroll:继承ShoworHide,增加功能:滚动滑轮立即停止,无点击按钮立即隐藏功能;
      • 知识点:开关思想bOk,比较定时器执行速度与滚轮滑动速度,定时器一般设置为30ms以上,滚轮速度就能更快;
    5. 终级版Finastopscr:继承Quickhide,增加功能:滚动滑轮立即停止
      • 知识点:将Stopscroll类函数中的Stopscr()函数复制一份,但是区别在于,在停止定时器后,要执行this.onScroll()函数,因为在Quickhide中,点击按钮,按钮立即隐藏,此时滚动事件已经被解除,所以在滚轮滑动停止后,给scroll重新绑定this.shide函数;
  • 代码:
    • 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>
    

相关文章

  • 第九周第一天笔记之toTop回到顶部实例

    1 回到顶部es6版面向对象+原生JS实例 代码:HTML代码: ...

  • vue点击返回顶部插件v-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等。 安装 np...

  • 回到顶部

    toTop(){ let timer = null; cancelAnimationFrame(timer);...

  • js 返回页面顶部(动画)

    js 返回到页面顶部,含有渐变或者动画效果 点击返回顶部按钮,页面逐渐向上回到顶部: js 返回到页面顶部,直接返...

  • 回到顶部

    经过百度与stackoverflow4年前还有很多quirks模式的时候 原因是这样的 Firefox & IE...

  • 回到顶部

    首先来下简易的css和html布局 其中图片: 接下来js 这个时候我们console.log(ispeed),发...

  • 回到顶部

  • 回到顶部

    首先提到回到顶部我们就想到的是a标签锚点跳转 a标签返回顶部的话会产生改变路由的问题每次用户点击返回顶部的话是可以...

  • 回到顶部

  • 回到顶部

    方法1 方法2

网友评论

    本文标题:第九周第一天笔记之toTop回到顶部实例

    本文链接:https://www.haomeiwen.com/subject/jgegnftx.html