Webapi---页面特效页面滚动事件和页面加载事件页面滚动事件滚动条在滚动的时候持续触发的事件事件类型s

页面滚动事件和页面加载事件

页面滚动事件

滚动条在滚动的时候持续触发的事件事件类型scroll window.addEventListener('scroll', function () { // 执行的操作 })

box的内容在进行滚动的时候 box.addEventListener('scroll', function () { // 执行的操作 })

加载事件

加载外部源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

后期业务处理之前，先添加load事件，保证所有资源全部加载完毕了

元素大小和位置

scroll家族：获取元素内容的总大小，并且可以获取元素向左向上滚动看不见的距离可读写属性

scrollWidth/scrollHeight 获取元素的宽高值，包含内容 + padding

scrollTop, scrollLeft 获取被卷去的大小尽量在scroll事件里面获取被卷去的距离可读写

scrollTop 获取垂直方向，被卷去头部距离通过scrollTop获取卷去的距离通过scrollTop让页面回到顶部

offset家族：获取元素自身大小，包括自身设置的宽高，内边距，边框。如果盒子是隐藏的,获取的结果是0

相对路径 offsetWidth offsetHeight

相对于定位父容器的距离

offsetLeft:当前元素相对于定位父容器的左侧距离

offsetTop:当前元素相对于定位父容器的上侧距离特征获取出来的是数值,方便计算只读属性,只能使用,不能设置

client家族：获取宽高：获取元素可见宽高，（不包含边框，滚动条）

clientWidth和clientHeight

获取位置：获取左边框和上边框宽度

clientLeft和cllientTop 是只读属性

仿页面固定头部

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .content {
      overflow: hidden;
      width: 1000px;
      height: 3000px;
      background-color: pink;
      margin: 0 auto;
    }

    .backtop {
      display: none;
      width: 50px;
      left: 50%;
      margin: 0 0 0 505px;
      position: fixed;
      bottom: 60px;
      z-index: 100;
    }

    .backtop a {
      height: 50px;
      width: 50px;
      background: url(./images/bg2.png) 0 -600px no-repeat;
      opacity: 0.35;
      overflow: hidden;
      display: block;
      text-indent: -999em;
      cursor: pointer;
    }

    .header {
      position: fixed;
      top: -80px;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: purple;
      text-align: center;
      color: #fff;
      line-height: 80px;
      font-size: 30px;
      transition: all 0.3s;
    }

    .sk {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin-top: 600px;
    }
  </style>

  <div class="header">我是顶部导航栏</div>
  <div class="content">
    <div class="sk">秒杀模块</div>
  </div>
  <div class="backtop">
    <img src="./images/close2.png" alt="" />
    <a href="javascript:;"></a>
  </div>

  <script>
    // 添加入口函数
    window.addEventListener('load', function () {
      // 获取元素
      let sk = document.querySelector('.sk')
      let header = document.querySelector('.header')
      // 获取当前元素离文档的距离
      let skOffsetTop = sk.offsetTop
      // 添加页面滚动的监听
      window.addEventListener('scroll', function () {
        // 获取垂直方向滚动出屏幕的距离，用这个距离和秒杀模块离顶部的距离进行比较
        let offset = document.documentElement.scrollTop
        // 判断是否满足条件，让header结构显示或隐藏
        if (offset >= skOffsetTop) {
          header.style.top = 0
        } else {
          header.style.top = '-80px'
        }
      })
    })
  </script>

小火箭案例

  <style>
    body {
      height: 8000px;
      background-image: linear-gradient(red, blue);
    }

    a {
      color: #fff;
    }

    .actGotop {
      position: fixed;
      bottom: 50px;
      right: 50px;
      width: 150px;
      height: 195px;
      display: none;
      z-index: 100;
    }

    .actGotop a,
    .actGotop a:link {
      width: 150px;
      height: 195px;
      display: inline-block;
        //背景图
      background: url(images/gotop.png) no-repeat;
      outline: none;
    }

    .actGotop a:hover {
      width: 150px;
      height: 195px;
        //背景图
      background: url(images/gotop.gif) no-repeat;
      outline: none;
    }
  </style>

  <!-- 需求：
    1.滚动出屏幕的距离超过1000的时候，出现小火箭
    2.单击小火箭能够返回到顶部 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>

<script>
    // 添加入口函数
    window.addEventListener('load', function () {
      let count = 0
      // 获取元素
      let actGotop = document.querySelector('.actGotop')
      // 添加页面滚动监听
      window.addEventListener('scroll', function () {
        // 获取垂直方向页面滚动出屏幕的距离
        let offset = document.documentElement.scrollTop
        // 判断是否超出指定范围
        if (offset >= count) {
          actGotop.style.display = 'block'
        } else {
          actGotop.style.display = 'none'
        }
        console.log(document.documentElement.scrollTop);
      })

      // 小火箭绑定单机事件
      actGotop.addEventListener('click', function () {
        // 让页面回到顶部
        document.documentElement.scrollTop = 0
        let dis = count
        // 定时器
        let tid = setInterval(function () {
          dis -= 100
          document.documentElement.scrollTop = dis
          // 判断等于0关闭定时器，隐藏小火箭
          if (dis <= 0) {
            clearInterval(tid)
            actGotop.style.display = 'none'
          }
        }, 10)
      })
    })

  </script>

电梯导航

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 3000px;
    }

    .aside {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .item {
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;
    }

    .active {
      background-color: red;
      color: #fff;
    }

    .content {
      width: 660px;
      margin: 400px auto;
    }

    .neirong {
      height: 300px;
      margin-bottom: 20px;
      color: #fff;
    }

    .content1 {
      background-color: red;
    }

    .content2 {
      background-color: blue;
    }

    .content3 {
      background-color: orange;
    }

    .content4 {
      background-color: yellowgreen;
    }
  </style>

  <div class="aside">
    <div class="item active">男装/女装</div>
    <div class="item">儿童服装/游乐园</div>
    <div class="item">电子产品</div>
    <div class="item">电影/美食</div>
  </div>

  <div class="content">
    <div class="neirong content1">男装/女装</div>
    <div class="neirong content2">儿童服装/游乐园</div>
    <div class="neirong content3">电子产品</div>
    <div class="neirong content4">电影/美食</div>
  </div>

 <script>
    //获取元素
    let items = document.querySelectorAll('.item')
    let neirongs = document.querySelectorAll('.neirong')
    // 入口函数
    window.addEventListener('load', function () {

      items.forEach(function (ele, index) {
        // 添加四个导航项单击事件
        ele.addEventListener('click', function () {
          document.querySelector('.item.active').classList.remove('active')
          ele.classList.add('active')
          // 垂直方向滚动
          // let current = neirongs[index]
          document.documentElement.scrollTop = neirongs[index].offsetTop
        })
      })
    })
  </script>

轮播图案例

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .main {
      width: 700px;
      margin: auto;
      background: #000;
      cursor: pointer;
    }

    .slides {
      height: 320px;
      position: relative;
    }

    .slides ul li {
      /* display: none; */
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      /* 这里实现淡入淡出的关键 */
      transition: all 0.3s;
    }

    .slides li.active {
      /* display: block; */
      opacity: 1;
    }

    .slides .extra {
      width: 700px;
      height: 53px;
      line-height: 53px;
      position: absolute;
      bottom: 0px;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 10;
    }

    .slides .extra h3 {
      width: 82%;
      margin: 0;
      margin-right: 20px;
      padding-left: 20px;
      color: #98e404;
      font-size: 28px;
      float: left;
      font-weight: 500;
      font-family: 'Microsoft Yahei', Tahoma, Geneva;
    }

    .slides .extra a {
      width: 30px;
      height: 29px;
      display: block;
      float: left;
      margin-top: 12px;
      margin-right: 3px;
      background-image: url(./assets/icon_focus_switch.png);
    }

    .slides .extra .prev {
      background-position: 0 0;
    }

    .slides .extra .prev:hover {
      background-position: -30px 0;
    }

    .slides .extra .next {
      background-position: -60px 0;
    }

    .slides .extra .next:hover {
      background-position: -90px 0;
    }

    .indicator {
      padding: 10px 0;
    }

    .indicator ul {
      list-style-type: none;
      margin: 0 0 0 4px;
      padding: 0;
      overflow: hidden;
    }

    .indicator ul li {
      position: relative;
      float: left;
      width: 60px;
      margin: 0 4px 0 5px;
      text-align: center;

      cursor: pointer;
    }

    .indicator li img {
      display: block;
      border: 0;
      text-align: center;
      width: 60px;
    }

    .indicator li .mask {
      width: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .indicator li .border {
      display: none;
      width: 54px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 20;
      border: 3px solid #98e404;
    }

    /* li里面的mask 和 border 刚开始都是显示的 */
    /* 我们写一个样式css */
    .indicator .active .mask {
      display: none;
    }

    .indicator .active .border {
      display: block;
    }
  </style>

  <div class="main">
    <div class="slides">
      <ul>
        <li class="active">
          <a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息" /></a>
        </li>
        <li>
          <a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息" /></a>
        </li>
      </ul>

      <div class="extra">
        <h3>第1张图的描述信息</h3>
        <a class="prev" href="javascript:;"></a>
        <a class="next" href="javascript:;"></a>
      </div>
    </div>
    <div class="indicator">
      <ul>
        <li class="active">
          <img src="assets/s_01.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_02.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_03.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_04.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_05.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_06.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_07.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_08.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_09.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_10.jpg" />
          <span class="mask"></span>
          <span class="border"></span>
        </li>
      </ul>
    </div>
  </div>
//引入js文件
  <script src="./js/index.js"></script>

// 入口函数
window.addEventListener('load', function () {
    // 获取元素
    // - 缩略图--标记，我们要为其添加单击事件
    let indicators = document.querySelectorAll('.indicator li')
    //- 文本描述信息：单击之后要修改文字描述信息
    let desc = document.querySelector('.extra h3')
    // - 大图：单击之后要切换大图的显示
    let slides = document.querySelectorAll('.slides li')
    // 上一张，下一张
    let prev = document.querySelector('.extra .prev')
    let next = document.querySelector('.extra .next')
    let main = document.querySelector('.main')

    // 全局索引
    let index = 0
    // 遍历伪数组   
    indicators.forEach(function (ele, i) {/* i为遍历索引 */
        // 绑定单击事件
        ele.addEventListener('click', function () {
            // 找到当前被点击的略缩图，添加高亮
            // 找到缩略图中有active样式的元素，将其active样式移除
            document.querySelector('.indicator .active').classList.remove('active')
            ele.classList.add('active')
            // 修改文本描述信息
            desc.innerHTML = `第${i + 1}张图的描述信息`

            // 显示对应大图
            // 移除之前的大图元素的active样式
            document.querySelector('.slides .active').classList.remove('active')
            // 为对应索引位置的大图添加active样式
            slides[i].classList.add('active')
            // 重置全局索引
            index = i
        })
    })


    //上一张
    prev.addEventListener('click', function () {
        // 索引减1
        index--
        // 判断索引是否越界
        if (index < 0) {
            index = indicators.length - 1
        }
        // 调用索引位置的li元素的click事件
        indicators[index].click()
    })


    //下一张
    next.addEventListener('click', function () {
        // 索引加1
        index++
        // 判断索引是否越界
        if (index > indicators.length - 1) {
            index = 0
        }
        // 调用索引位置的li元素的click事件
        indicators[index].click()
    })


    // 自动轮播
    let timeId
    function time() {
        timeId = setInterval(function () {
            next.click()
        }, 500)
    }
    time()
    // 鼠标移入时 关闭定时器
    main.addEventListener('mouseenter', function () {
        clearInterval(timeId)
    })
    // 移除后 重新开始定时器
    main.addEventListener('mouseleave', function () {
        time()
    })

})

Webapi---页面特效