5. DOM 网页特效 - 手风琴实例、轮播图实例 、元素大小和位置

J_Tiffany
60 阅读7分钟

1. 手风琴实例

image.png

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 180px;
      height: 400px;
      float: left;
      transition: all 500ms;
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./3.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./4.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./5.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./6.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./7.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./8.png" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
     let lis = document.querySelectorAll('li')
     // 绑定鼠标经过和离开事件
     for ( let i = 0; i < lis.length; i++ ) {
        lis[i].addEventListener('mouseenter',function(){
          // 干掉所有，只留自己
           for ( let j = 0; j < lis.length; j++ ) {
              lis[j].style.width = '100px'
           }
           this.style.width = '600px'
        })

        lis[i].addEventListener('mouseleave',function(){
          for ( let j = 0; j < lis.length; j++ ) {
              lis[j].style.width = '180px'
           }
        })
     }
</script>
</html>

2. 滚动事件

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回页面顶部等，当页面进行滚动时就会触发 滚动事件

滚动事件名 scroll ，监听整个页面滚动：

image.png

一般给 window 或 document 添加 scroll 事件，监听某个元素的内部滚动直接给某个元素加即可

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Dcument</title>
    <style>
      body {
        height:3000px;
      }
    </style>
  </head>

  <body>
    <script>
      document.addEventListener('scroll', () => {
        console.log(123)
      })
    </script>
  </body>
</html>

3. 加载事件

外部资源（如图片、外联样式、JS 等）加载完毕时触发的事件，事件名 load

监听页面所有资源加载完毕，给 window 添加 load 事件：

image.png

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定 load 事件

有时候需要等页面资源全部处理完了再做一些事情，这时将 script 标签写在 head 中的代码，直接找 dom 元素找不到：

image.png

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Dcument</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: aqua;
        font-size: 18px;
        background-color: aliceblue;
      }
    </style>

    <script>
      let text = document.querySelector('div')
      console.log(text)
    </script>
  </head>

  <body>
    <div>测试文字</div>
  </body>
</html>

这时需要等页面资源加载完毕再调用：

image.png

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Dcument</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: aqua;
        font-size: 18px;
        background-color: aliceblue;
      }
    </style>

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

  <body>
    <div>测试文字</div>
  </body>
</html>

4. 元素大小和位置

4.1 scroll 家族

如果我们想要页面滚动 100 px 就让某些元素隐藏，就可以使用 scroll 来检测页面滚动的距离

scrollWidth 和 scrollHeight 获取元素的 内容 总宽高（不包含滚动条），返回值不带单位

scrollTop 和 scrollLeft 获取元素内容往左、往上滚出去看不到的距离，这两个属性是可以 修改 的

image.png

示例1：获取内容的宽高

image.png

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Dcument</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        font-size: 18px;
        border: 1px solid rgb(242, 113, 70);
      }
    </style>
  </head>

  <body>
    <div>测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字</div>

    <script>
      let text = document.querySelector('div')
      console.log(text.scrollWidth)
      console.log(text.scrollHeight)
    </script>
  </body>
</html>

image.png

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Dcument</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        font-size: 18px;
        border: 1px solid rgb(242, 113, 70);
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div>测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字</div>

    <script>
      let text = document.querySelector('div')
      console.log(text.scrollWidth)
      console.log(text.scrollHeight)
    </script>
  </body>
</html>

示例2：获取位置

返回 HTML 元素：

image.png

向下滑动滚动条：

image.png

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Dcument</title>
    <style>
     body {   
        height: 1000px;
     }
    </style>
  </head>

  <body>

    <script>
      // console.log(document.documentElement)
      document.addEventListener('scroll',()=>{
        console.log(document.documentElement.scrollTop)
      })
    </script>
  </body>
</html>

实例：页面滚动显示返回顶部按钮

需求描述：当页面滚动到 600 像素时，就会显示返回顶部的按钮，否则隐藏；

同时，点击按钮，返回页面顶部

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .content {
        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 span {
        height: 50px;
        width: 50px;
        display: block;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="content"></div>
    <div class="backtop">
      <span>X</span>
    </div>

    <script>
      let backtop = document.querySelector('.backtop')

      // 页面的滚动事件
      document.addEventListener('scroll', () => {
        // 检测页面滚动的距离
        let st = document.documentElement.scrollTop
        if (st >= 600) {
          backtop.style.display = 'block'
        } else {
          backtop.style.display = 'none'
        }
      })

      // 点击返回页面顶部
      backtop.children[0].addEventListener('click', () => {
        document.documentElement.scrollTop = 0
      })
    </script>
  </body>
</html>

4.2 offset 家族

以上案例滚动多少距离都是我们自己算的，最好是页面滚动到某个元素就可以做某些事

简单来说，就是通过 js 的方式，得到元素在页面中的位置

offsetWidth 和 offsetHeight 可以获取元素的自身宽高，包含元素自身设置的宽高、padding、border

offsetTop 和 offsetLeft 是只读属性，可以获取元素距离自己定位父级元素的左、上距离，如果没有定位的父级，则以文档左上角为准

image.png

示例：

image.png

实例：点击侧边栏，滑到右边对应的内容；如果页面停留在内容区域，左边对应的侧边栏高亮

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .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>
  </head>

  <body>
    <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('.aside .item')
      let neirongs = document.querySelectorAll('.content .neirong')

      for (let i = 0; i < items.length; i++) {
        items[i].addEventListener('click', () => {
          // 移除 aside 下激活的样式
          document.querySelector('.aside .active').classList.remove('active')
          // 只给当前点击的元素添加
          items[i].classList.add('active')

          // 内容跟随滚动
          document.documentElement.scrollTop = neirongs[i].offsetTop
        })
      }

      let cont = document.querySelector('.content')
      window.addEventListener('scroll', () => {
        let num = document.documentElement.scrollTop

        if (num <= 700) {
          document.querySelector('.aside .active').classList.remove('active')
          items[0].classList.add('active')
        } else if (num >= 718 && num <= 1018) {
          document.querySelector('.aside .active').classList.remove('active')
          items[1].classList.add('active')
        } else if (num >= 1038 && num <= 1338) {
          document.querySelector('.aside .active').classList.remove('active')
          items[2].classList.add('active')
        } else if (num >= 1360) {
          document.querySelector('.aside .active').classList.remove('active')
          items[3].classList.add('active')
        }
      })
    </script>
  </body>
</html>

4.3 client 家族

clientWidth 和 clientHeight 获取元素可见部分的宽高（不包含边框、滚动条等）

clientLeft 和 clientTop 是只读属性，获取左边框和上边框宽度

image.png

resize 会在窗口尺寸改变的时候触发事件，例如检测窗口宽度：

image.png

5. 综合实例：轮播图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

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

      .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>
  </head>

  <body>
    <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="第10张图的描述信息" /></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>

    <script>
      // 1. 鼠标经过 高亮
      let lis = document.querySelectorAll('.indicator li')
      let piclis = document.querySelectorAll('.slides ul li')
      let text = document.querySelector('.extra h3')
      let btnRight = document.querySelector('.next')
      let btnLeft = document.querySelector('.prev')
      let main = document.querySelector('.main')

      for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function () {
          // document.querySelector('.indicator li').classList.remove('active')  // 只移除第一个 li
          document.querySelector('.indicator .active').classList.remove('active') // 移出第一个 active
          this.classList.add('active')

          // 2. 大图片跟随变化
          document.querySelector('.slides ul .active').classList.remove('active')
          piclis[i].classList.add('active')
          // 文字随之改变
          text.innerHTML = ` 第${i + 1}张图的描述信息 `

          // 4. 鼠标经过，点击按钮，继续下一张播放
          index = i // 页面刷新时， index = 0 已执行完毕，触发鼠标经过事件时，再执行 index = i ，点击按钮，直接执行点击事件
        })
      }

      let index = 0 // 全局变量 - 信号量/控制量 右侧左侧按钮同时使用
      // 3. 右侧按钮播放效果
      btnRight.addEventListener('click', function () {
        index++
        index = index % lis.length // 播放到最后一张时，返回到第一张图片
        common()
      })

      // 5. 左侧按钮播放效果
      btnLeft.addEventListener('click', function () {
        index--
        index = (lis.length + index) % lis.length // 播放到第一张时，返回到最后一张图片
        // 选出 index，小图片 做操作
        common()
      })

      // 封装函数 common
      function common() {
        document.querySelector('.indicator .active').classList.remove('active') // 移出第一个 active
        lis[index].classList.add('active')
        // 选出 index，大图片 做操作
        document.querySelector('.slides ul .active').classList.remove('active')
        piclis[index].classList.add('active')
        text.innerHTML = ` 第${index + 1}张图的描述信息 `
      }

      // 定时器
      let timer = setInterval(function () {
        // 自动调用右侧的点击事件
        btnRight.click()
      }, 1000)

      // 鼠标经过大盒子任意部分，定时器停止
      main.addEventListener('mouseenter', function () {
        clearInterval(timer)
      })
      // 鼠标离开，定时器开启
      main.addEventListener('mouseleave', function () {
        timer = setInterval(function () {
          btnRight.click()
        }, 1000)
      })
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝