第七周第三天笔记

1 a链接

• 如果href未设置，或设置为#；页面会默认跳转到顶部
• 阻止a链接跳转：
  • 设置：...;
  • 设置：...;
• a链接一般可以用于锚点设置
  • 代码：锚链..，锚点
    ..
    ;

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前面，定时器停止后；

   
   
   
       
       
       
   
   
   
  toTop
   
   
   
   
  

3 回到顶部随时停下实例

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

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

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

5 元素分步显示实例

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

   
   
   
       
       
       
   
   
   恭喜大家发财
   
   
   
  

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

• 知识点：
  • 两个事件，onload事件元素加载成功触发，onerror事件，元素加载失败触发；
  • 图片加载附地址时，可以新建一个替身图片，可以用tempImg=new Image创建，也可以用tempImg=document.createElement("image")创建；
  • 元素身上系统属性可以用点获取或设置，但是元素身上已经定义过的自定义属性，不能用点获取，必须用getAttribute获取；
  • 寻找元素的父级结构元素，利用ele.parentNode获取
  • 设置元素的行间样式，用点就能设置，设置元素的非行间样式，用style设置；
• 思路：
  1. 图片要成功加载，必须触发滚轮事件window.onscroll
  2. 图片加载的条件：img.offsetTop+img.offsetHeight;
  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值；
• 代码：

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

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