Web APIs第五天 DOM-网页特效篇

1.滚动事件和加载事件

1.1滚动事件

~当页面进行滚动时触发的事件
~很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
事件名：scroll
监听某个元素的内部滚动直接给某个元素加即可

<script>
    let div = document.querySelector('div')
    div.addEventListener('scroll', function () {
        console.log(111)
    })
</script>

1.2加载事件

1. 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
   有些时候需要等页面资源全部处理完了做一些事情
   老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
   事件名：load
   ~监听页面所有资源加载完毕：给 window 添加 load 事件
   注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

<script>
    let div = document.querySelector('div')
    div.addEventListener('load', function () {
        console.log(111)
    })
</script>

2. 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表
   ~图像等完全加载
   ~事件名：DOMContentLoaded
   ~监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

2.元素大小和位置

2.1 scroll家族

1. 获取宽高：
    获取元素的内容总宽高（不包含滚动条）返回值不带单位
    scrollWidth和scrollHeight
2. 获取位置:
    获取元素内容往左、往上滚出去看不到的距离
    scrollLeft和scrollTop
    这两个属性是可以修改的

<script>
    // 页面滚动事件
    windouw.adEventListener('scroll', function () {
        let num = document.documentElement.scroollTop
        console.log(num)
    })
</script>

1. scrollWidth和scrollHeight是得到元素什么的宽高？
   内容
   不包含滚动条
2. 被卷去的头部或者左侧用那个属性？是否可以读取和修改？
   scrollTop / scrollLeft
   可以读取，也可以修改（赋值）
3. 检测页面滚动的头部距离（被卷去的头部）用那个属性？
   document.documentElement.scrollTop

需求：当页面滚动500像素，就显示返回顶部按钮，否则隐藏， 同时点击按钮，则返回顶部
分析：
①：用到页面滚动事件
②：检测页面滚动大于等于100像素，则显示按钮
③：点击按钮，则让页面的scrollTop 重置为 0

<script>
    let backtop = document.querySelector('.backtop')
    // 1.页面滚动事件
    window.addEventListener('scroll', function () {
        // 2.检测滚动的距离
        // console.log(document.documentElement.scrollTop);
        let num = document.documentElement.scrollTop
        if (num >= 500) {
            //显示那个元素
            backtop.style.display = 'block'
        } else {
            backtop.style.display = 'none'
        }
    })
    //返回顶部
    backtop.children[1].addEventListener('click', function () {
        document.documentElement.scrollTop = 0
    })
</script>

2.2 offset家族

1. 获取宽高：
   获取元素的自身宽高、包含元素自身设置的宽高、padding、border
   offsetWidth和offsetHeight
2. 获取位置：
   获取元素距离自己定位父级元素的左、上距离
   offsetLeft和offsetTop 注意是只读属性

固定导航栏案例

需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出
分析：
①：用到页面滚动事件
②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出

<script>
    let sk = document.querySelector('.sk')
    let header = document.querySelector('.header')
    // 页面滚动事件
    window.addEventListener('scroll', function () {
        // 检测滚动距离
        if (document.documentElement.scrollTop >= sk.offsetTop) {
            header.style.top = '0'
        } else {
            header.style.top = '-80px'
        }
    })
</script>

电梯导航案例

需求：点击可以页面调到指定效果
分析：
①：点击当前 小导航，当前添加active，其余移除active
②：得到对应 内容 的 offsetTop值
③：让页面的 scrollTop 走到 对应 内容 的 offsetTop

<script>
    let items = document.querySelectorAll('.item')
    // 内容盒子获取
    let neirongs = document.querySelectorAll('.neirong')
    for (let i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function () {
            // 找到上一个移除类active
            document.querySelector('.aside .active').classList.remove('active')
            // 点击谁添加谁
            this.classList.add('active')
            // 让页面到相应的位置
            document.documentElement.scrollTop = neirong[i].offsetTop
        })
    }
</script>

2.3 client家族

获取宽高：
 获取元素的可见部分宽高（不包含边框，滚动条等）
 clientWidth和clientHeight
获取位置：
 获取左边框和上边框宽度
 clientLeft和clientTop 注意是只读属性

<script>
    // 当窗口发生变化的时候
    window.addEventListener('resize', function () {
        console.log(111);
        // 检测屏幕高度
        let w = document.documentElement.clientWidth
        console.log(w)
    })
</script>

3.综合案例

轮番图

<script>
  // 轮播图开始啦
  // 需求①：小图标鼠标经过事件
  //   鼠标经过小图片，当前高亮，其余兄弟变淡  添加类
  let lis = document.querySelectorAll('.indicator li')
  let piclis = document.querySelectorAll('.slides ul li')
  let text = document.querySelector('.extra h3')
  let next = document.querySelector('.next')
  let prev = document.querySelector('.prev')
  let main = document.querySelector('.main')

  // 给多个小li绑定事件
  for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseenter', function () {
      // 选出唯一的那个active ，删除类
      document.querySelector('.indicator .active').classList.remove('active')
      // 鼠标经过谁，谁加上active 这个类
      this.classList.add('active')

      // 需求② ：大图片跟随变化  一定要放到鼠标经过事件里面
      // 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入      淡出的效果，还是添加类
      // 选出唯一的那个active ，删除类
      document.querySelector('.slides ul .active').classList.remove('active')
      // 对应序号的那个 li，谁加上active 这个类
      piclis[i].classList.add('active')
      text.innerHTML = `第${i + 1}张图的描述信息`

      // 需求④：解决一个BUG
      // 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
      // 解决方案：  让变化量 index 重新赋值为 当前鼠标经过的索引号
      // 鼠标经过了那个小li 他的索引号就是 i 
      // 右侧按钮是通过 index 来了控制播放的
      index = i
    })
  }


  // 需求③：右侧按钮播放效果
  //   点击右侧按钮，可以自动播放下一张图片
  //   需要一个变化量  index 不断自增
  //   然后播放下一张图片
  //   如果到了最后一张，必须要还原为第1张图片
  //   教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
  let index = 0  // 全局变量  信号量 控制器 为了给 右侧按钮和左侧按钮同时使用
  next.addEventListener('click', function () {
    index++
    // 选出 index 小图片 做操作
    // console.log(index)
    // if (index === lis.length) {
    //   index = 0
    // }
    index = index % lis.length
    common()

  })

  // 需求⑤：左侧按钮播放效果
  //   点击左侧按钮，可以自动播放上一张图片
  //   需要一个变化量  index 不断自减
  //   然后播放上一张图片
  //   如果到了第一张，必须要从最后一张播放
  //   教你一招： 索引号 = (数组长度 + 索引号) % 数组长度
  prev.addEventListener('click', function () {
    index--
    // 选出 index 小图片 做操作
    // console.log(index)
    if (index < 0) {
      index = lis.length - 1
    }
    // index = (lis.length + index) % lis.length
    common()

  })

  // 需求⑥：
  //   因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common
  function common() {
    document.querySelector('.indicator .active').classList.remove('active')
    lis[index].classList.add('active')
    // 选出 index 大图片 做操作
    document.querySelector('.slides ul .active').classList.remove('active')
    piclis[index].classList.add('active')
    text.innerHTML = `第${index + 1}张图的描述信息`
  }



  // 需求⑦：开启定时器
  //   其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， next.click()
  let timer = setInterval(function () {
    // 自动调用右侧按钮的点击事件
    next.click()
  }, 1000)
  // 需求⑧：
  //   鼠标经过停止定时器 （清除定时器）

  main.addEventListener('mouseenter', function () {
    clearInterval(timer)
  })
  //   鼠标离开开启定时器 （开启定时器）
  main.addEventListener('mouseleave', function () {
    timer = setInterval(function () {
      // 自动调用右侧按钮的点击事件
      next.click()
    }, 1000)
  })
</script>