第七周第三天笔记

2018-09-03 本文已影响0人果木山

1 a链接

如果href未设置，或设置为#；页面会默认跳转到顶部
阻止a链接跳转：
- 设置：<a href="javascript:;">...</a>;
- 设置：<a href="javascript:void(0);">...</a>;
a链接一般可以用于锚点设置
- 代码：锚链<a href="#div1">..</a>，锚点<div id="div1">..</div>;

2 回到顶部实例

思路：

Css样式中a标签为行内元素，无法设置宽高，但是当添加固定定位后，脱离文档流，默认转为块状元素，可以设置宽高；
给按钮添加点击事件，确定速度与频率，进而确定步长，然后针对浏览器卷去的长度来进行比较，利用定时器进行多次操作，函数内获取实时的卷去长度，减等步长，再设置新的卷去长度，反复进行，判断实时的卷去长度是否小于等于0，此时设置卷去长度为0，即回到顶部，clearInterval关闭定时器，return阻断程序执行；
升级1：当卷去长度小于等于一屏的高度时，按钮隐藏，当卷去长度大于一屏的高度后，按钮显示，一屏的高度用clientHeight来获取，设置样式用oBtn.style.display="block"，给window添加onscroll滚动事件；
升级2：当点击按钮后，让按钮隐藏，所以在点击事件中添加this.style.display="none";,当每次点击后，按钮都会隐藏；但是会出现bug，按钮隐藏后，会立刻显示，因为与onscroll事件冲突，所以需要在点击事件中添加window.onscroll=null，给事件赋值null，事件不执行，当点击事件中，计时器停止后，即回到顶部，在重新设置滚动事件window.onscroll=add;add指的是函数的定义阶段，添加位置一定要在return前面，定时器停止后；

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>回到顶部</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         .wrap{
             width: 100%;
             height: 3000px;
             background: -webkit-linear-gradient(top,lightskyblue,lightsalmon,lightseagreen,red);
         }
         .wrap a{
             width: 50px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             border-radius: 50%;
             background-color: yellow;
             font-size: 10px;
             color: black;
             font-weight: bold;
             text-decoration: none;
             position: fixed;
             right: 20px;
             bottom: 20px;
             display: none;
         }
     </style>
 </head>
 <body>
 <div class="wrap"><a href="javascript:void(0);">toTop</a></div>
 <script src="utils2.js"></script>
 <script>
     //添加点击事件，确定步长step，由速度和频率决定，v,f,总距离为scrollTop浏览器卷去的长度
     //升级1 卷去距离小于一屏的高度，按钮隐藏，大于后，按钮显示，添加滚动事件onscroll
     //升级2 当点击事件触发时，按钮消失，回到顶部
     var oBtn=document.getElementsByTagName("a")[0];
     window.onscroll=add;
     function add(){
         var curScroll=utils.win("scrollTop");
         if(curScroll>=utils.win("clientHeight")){
             oBtn.style.display="block";
         }else{
             oBtn.style.display="none";
         }
     }
     oBtn.onclick=function () {
         this.style.display="none";
         window.onscroll=null;//事件赋值null，事件停止
         var v=1;
         var f=10;
         var step=v*f;
         var timer=setInterval(function () {
             var curTop=utils.win("scrollTop");
             curTop-=step;
             if(curTop<=0){
                 utils.win("scrllTop",0);
                 clearInterval(timer);
                 window.onscroll=add;//一定要放在return前面
                 return;//阻断程序执行；
             }
             //改变curTop后，要设置
             utils.win("scrollTop",curTop);
         });
     };
 </script>
 </body>
 </html>

3 回到顶部随时停下实例

知识点：

需求：在点击事件触发后，回到顶部过程中，滑动滚轮使其停止
思路：添加开关oBk，给其赋值为false，在滚动事件中进行判断，当oBk为true时，点击事件中的定时器停止，判断条件后在滚动事件中给bOk重新赋值true，因为滚动事件发生会连续触发多次，将oBk赋值为true，才能停止，前提是要快过点击事件中的定时器的重复执行时间，在点击事件定时器后，要给oBk重新赋值为false
注意点：
- 点击事件中的timer要设为全局变量，因为点击事件和滚动事件是两个函数，会形成两个私有作用域，两者之间是不会相互查找的；
- 点击事件中在最后要给oBk赋值为false,滚动事件中，给oBk赋值为true,一定要在判断条件之后；
- 保证能够停下来，点击事件中的定时器触发时间要在20s以上；
- 在回到顶部实例中，在点击事件中会设置window.onscroll=null，如果添加此代码，不能再停止，因为滚动事件已经被赋值为null，没有了点击事件；

 <script>
     //升级3 当手动滚动时，让回到顶部中的定时器停止
     //分析：onscroll时间当滚动一下就会触发多次，但是要保证滚动的连续触发时间大于定时器的触发时间f;f一般大于20就可以；
     //注意：停的定时器timer为全局变量，定时器的时间需要在20以上，添加开关
     var oBtn=document.getElementsByTagName("a")[0];
     var bOk=false;
     var timer=null;
     window.onscroll=add;
     function add(){
         if(bOk){
             clearInterval(timer);
         }
         bOk=true;
         var curScroll=utils.win("scrollTop");
         if(curScroll>=utils.win("clientHeight")){
             oBtn.style.display="block";
         }else{
             oBtn.style.display="none";
         }
     }
     oBtn.onclick=function () {
         this.style.display="none";
         //window.onscroll=null;//事件赋值null，事件停止
         var v=1;
         var f=30;
         var step=v*f;
         timer=setInterval(function () {//timer要设置为全局变量，才能在滚动事件中获取到
             var curTop=utils.win("scrollTop");
             curTop-=step;
             if(curTop<=0){
                 utils.win("scrllTop",0);
                 clearInterval(timer);
                 return;//阻断程序执行；
             }
             //改变curTop后，要设置
             utils.win("scrollTop",curTop);
             bOk=false;
         },f);
     };
 </script>

4 回到顶部点击隐藏+随时停下实例

知识点：

需求：在点击回到顶部按钮，按钮隐藏，在回到顶部过程中，滑动滚轮使其停止
思路：终极版升级，通过设置两个滚动函数，一个目的是判断按钮的显示和隐藏；一个目的是滑动鼠标滚轮，滚动停止；
注意点：
- 页面加载时，给window.onscroll赋值为scrollDisplay函数，根据卷去高度来判断按钮的显示和隐藏；
- 点击事件触发后，按钮隐藏，并给window.onscroll重新赋值为scrollStop函数，此时就可以通过滑动鼠标滚轮来随时停下滚动条了；
- 当停下滚动条后，即在scrollStop函数中停止定时器时，必须重新给window.onscroll赋值为scrollDisplay，用来判断停下时刻，按钮是显示还是隐藏；
- 在定时器匿名函数中，当卷去高度为0时，停止定时器后，一定要再给window.onscroll赋值为scrollDisplay;此时才能恢复到点击前的初始效果；

 <script>
     var oBtn=document.getElementsByTagName("a")[0];
     var bOk=false;
     var timer=null;
     window.onscroll=scrollDisplay;
     oBtn.onclick=function () {
         this.style.display="none";
         window.onscroll=scrollStop;//事件赋值scrollStop函数，事件可以随时停下；
         var v=1;
         var f=30;
         var step=v*f;
         timer=setInterval(function () {//timer要设置为全局变量，才能在滚动事件中获取到
             var curTop=utils.win("scrollTop");
             curTop-=step;
             if(curTop<=0){
                 utils.win("scrllTop",0);
                 clearInterval(timer);
                 window.onscroll=scrollDisplay;
                 return;//阻断程序执行；
             }
             //改变curTop后，要设置
             utils.win("scrollTop",curTop);
             bOk=false;
         },f);
     };
     //判断按钮的显示和隐藏
     function scrollDisplay(){
         var curScroll=utils.win("scrollTop");
         if(curScroll>=utils.win("clientHeight")){
             oBtn.style.display="block";
         }else{
             oBtn.style.display="none";
         }
     }
     //鼠标滑动立即停下
     function scrollStop(){
         if(bOk){
             clearInterval(timer);
             window.onscroll=scrollDisplay;
         }
         bOk=true;
     }
 </script>

5 元素分步显示实例

知识点：

利用定时器来控制元素的显示的时间间隔，利用全局变量n的变化来作为元素集合的索引值，进行遍历操作；
代码中span为行内元素，所以会设置display:inline-block,不能再设置display:none，可以利用透明度来隐藏；

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>元素分步显示</title>
     <style>
         span{
             display: inline-block;
             width: 100px;
             height: 100px;
             line-height: 100px;
             border-radius: 50px;
             margin: 10px;
             text-align: center;
             background-color: red;
             font-size: 30px;
             opacity: 0;
         }
     </style>
 </head>
 <body>
 <span>恭</span><span>喜</span><span>大</span><span>家</span><span>发</span><span>财</span>
 <script>
     var aSpan=document.getElementsByTagName("span");
     var n=0;
     var timer=setInterval(function () {
         if(n>=aSpan.length){
             clearInterval(timer);
             return;//阻断程序执行
         }
         aSpan[n++].style.opacity=1;
     },400)
 </script>
 </body>
 </html>

6 单张图片的延迟加载实例

知识点：
- 两个事件，onload事件元素加载成功触发，onerror事件，元素加载失败触发；
- 图片加载附地址时，可以新建一个替身图片，可以用tempImg=new Image创建，也可以用tempImg=document.createElement("image")创建；
- 元素身上系统属性可以用点获取或设置，但是元素身上已经定义过的自定义属性，不能用点获取，必须用getAttribute获取；
- 寻找元素的父级结构元素，利用ele.parentNode获取
- 设置元素的行间样式，用点就能设置，设置元素的非行间样式，用style设置；
思路：
1. 图片要成功加载，必须触发滚轮事件window.onscroll
2. 图片加载的条件：img.offsetTop+img.offsetHeight<scrollTop+clientHeight;
3. 图片开始加载
  - 1)先找一个临时的图片对象 tempImg=new Image等同于tempImg=document.createElement("image");
  - 2)把要用的图片地址，利用tempImg校验下
  - 3)校验结果：onload onerror
  - 4)如果成功，则触发onload事件，把正确的地址赋值给真正的img标签，一定要注意性能优化
    - 图片只加载一次img.loaded=true;
    - 释放临时图片对象tempImg=null;
  - 5)如果不成功，则触发onerror事件，同上；
4. img标签的src属性必须添加值，否则img不显示，就没有offsetHeight值；

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>单张图片延迟加载</title>
     <style>
         body,html{
             width: 100%;
             height: 200%;
         }
         div{
             position: absolute;
             top: 1000px;
         }
         p{
             width: 200px;
             height: 200px;
             background: url("image/2.jpg") center no-repeat #ffffff;
             background-size: 100% 100%;
         }
         p img{
             width: 100%;
             height: 100%;
         }
     </style>
 </head>
 <body>
 <div>
     <p><img src="image/2.jpg" realImage="image/1.jpg"/></p>
 </div>
 <script src="utils2.js"></script>
 <script>
     var oImg=document.getElementsByTagName("img")[0];
     window.onscroll=function () {
         var scrollBot=utils.win("scrollTop")+utils.win("clientHeight");
         var imgTop=utils.offset(oImg).Top+oImg.offsetHeight;
         if(imgTop<scrollBot){
             Lazyload();
         }
     };
     function Lazyload() {
         //避免重复加载
         if(oImg.loaded){
             return;//阻断程序执行；
         }
         //新建一个临时的替身图片
         var tempImg=new Image();//也可以写成tempImg=document.createElement("img")
         //将地址赋给临时替身图片，验证替身图片是否加载成功
         tempImg.src=oImg.getAttribute("realImage");//元素身上已经存在的自定义属性，不能有点来获取
         //加载成功
         tempImg.onload=function () {
             oImg.src=this.src;
             oImg.loaded=true;//添加自定义属性，只让onload事件触发一次；
             tempImg=null;//性能优化，将没用的元素删除；
         };
         //加载失败
         tempImg.onerror=function () {
             oImg.parentNode.style.backgroundImage='url("image/3.jpg")';//设置元素的非行间样式，用style，改变p元素的背景图；
             oImg.loaded=true;
             tempImg=null;
         }
     }
 </script>
 </body>
 </html>

7 多张图片的延迟加载实例

知识点：遍历多个图片元素，然后调用函数执行

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>多张图片的延迟加载</title>
     <style>
         body,html{
             width: 100%;
             height: 200%;
         }
         div{
             width: 200px;
             height: 200px;
             margin-bottom: 20px;
             background: url("image/5.jpg") center no-repeat #ffffff;
             background-size: 100% 100%;
         }
         div img{
             width: 100%;
             height: 100%;
         }
     </style>
 </head>
 <body>
 <p style="height: 1000px;"></p>
 <div><img src="image/5.jpg" realImage="image/1.jpg" alt=""></div>
 <div><img src="image/5.jpg" realImage="image/2.jpg" alt=""></div>
 <div><img src="image/5.jpg" realImage="image/33.jpg" alt=""></div>
 <div><img src="image/5.jpg" realImage="image/4.jpg" alt=""></div>
 <script src="utils2.js"></script>
 <script>
     var aImg=document.getElementsByTagName("img");
     window.onscroll=function () {
         for(var i=0; i<aImg.length; i++){
             var scrollBot=utils.win("scrollTop")+utils.win("clientHeight");
             var imgTop=utils.offset(aImg[i]).Top+aImg[i].offsetHeight+188;
             if(imgTop<scrollBot){
                 lazyLoad(aImg[i]);
             }
         }
     };
     function lazyLoad(img) {
         if(img.loaded) return;
         var Imgfrg=document.createElement("img");
         Imgfrg.src=img.getAttribute("realImage");
         Imgfrg.onload=function () {
             img.src=this.src;
             Imgfrg=null;
             img.loaded=true;
         };
         Imgfrg.onerror=function () {
             img.parentNode.style.backgroundImage='url(image/6.jpg)';
             Imgfrg=null;
             img.loaded=true;
         };
     }
 </script>
 </body>
 </html>

第七周第三天笔记

1 a链接

2 回到顶部实例

3 回到顶部随时停下实例

4 回到顶部点击隐藏+随时停下实例

5 元素分步显示实例

6 单张图片的延迟加载实例

7 多张图片的延迟加载实例

猜你喜欢

热点阅读