devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web APIs知识点讲解(阶段五)

作者：AllinToyou | 2024-03-30 08:01:10

赞

踩

Web APIs知识点讲解(阶段五)

 DOM- 网页特效篇

一.课前回顾(手风琴)

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title>手风琴</title>
  7.   <style>
  8.     ul {
  9.       list-style: none;
  10.     }
  11.  
  12.     * {
  13.       margin: 0;
  14.       padding: 0;
  15.     }
  16.  
  17.     div {
  18.       width: 1200px;
  19.       height: 400px;
  20.       margin: 50px auto;
  21.       border: 1px solid red;
  22.       overflow: hidden;
  23.     }
  24.  
  25.     div li {
  26.       width: 240px;
  27.       height: 400px;
  28.       float: left;
  29.       transition: all 500ms;
  30.     }
  31.  
  32.     div ul {
  33.       width: 1200px;
  34.     }
  35.   </style>
  36. </head>
  37.  
  38. <body>
  39.   <div id="box">
  40.     <ul>
  41.       <li>
  42.         <a href="#">
  43.           <img src="./images/1.jpg" alt="">
  44.         </a>
  45.       </li>
  46.       <li>
  47.         <a href="#">
  48.           <img src="./images/2.jpg" alt="">
  49.         </a>
  50.       </li>
  51.       <li>
  52.         <a href="#">
  53.           <img src="./images/3.jpg" alt="">
  54.         </a>
  55.       </li>
  56.       <li>
  57.         <a href="#">
  58.           <img src="./images/4.jpg" alt="">
  59.         </a>
  60.       </li>
  61.       <li>
  62.         <a href="#">
  63.           <img src="./images/5.jpg" alt="">
  64.         </a>
  65.       </li>
  66.     </ul>
  67.   </div>
  68. </body>
  69. <script>
  70.   // 1.Li 默认有个宽度是240像素
  71.   // 2.当鼠标经过，当前的小li 宽度变大800px 其余的小li 变为 100px
  72.   // 3.鼠标离开事件，所有的小li都要复原，宽度为240px
  73.   // (1).获取元素
  74.   let lis = document.querySelectorAll('li')
  75.   // (2).绑定鼠标经过和鼠标离开
  76.   for (let i = 0;i < lis.length;i++){
  77.     // (3).鼠标经过
  78.     lis[i].addEventListener('mouseenter',function(){
  79.       // 排他思想
  80.       for (let j = 0;j < lis.length;j++){
  81.         lis[j].style.width = '100px'
  82.       }
  83.       this.style.width='800px'
  84.     })
  85.     lis[i].addEventListener('mouseleave',function(){
  86.       for (let j = 0;j < lis.length;j++){
  87.         lis[j].style.width = '240px'
  88.       }
  89.     })
  90.   }
  91. </script>
  92.  
  93. </html>

 

二.滚动事件和加载事件

1.滚动事件
  • 当页面进行滚动时触发的事件
  • 为什么要学？

           很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

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

        给 window 或 document 添加 scroll 事件

  • 监听某个元素的内部滚动直接给某个元素加即可
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         body{
  9.             height: 3000px;
  10.         }
  11.         div {
  12.             overflow: auto;
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: pink;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div>
  21.         我里面可以放很多内容
  22.         我里面可以放很多内容
  23.         我里面可以放很多内容
  24.         我里面可以放很多内容
  25.         我里面可以放很多内容
  26.         我里面可以放很多内容
  27.         我里面可以放很多内容
  28.         我里面可以放很多内容
  29.         我里面可以放很多内容
  30.         我里面可以放很多内容
  31.         我里面可以放很多内容
  32.         我里面可以放很多内容
  33.         我里面可以放很多内容
  34.         我里面可以放很多内容
  35.         我里面可以放很多内容
  36.         我里面可以放很多内容
  37.         我里面可以放很多内容
  38.         我里面可以放很多内容
  39.         我里面可以放很多内容
  40.         我里面可以放很多内容
  41.         我里面可以放很多内容
  42.         我里面可以放很多内容
  43.     </div>
  44.     <script>
  45.         let div = document.querySelector('div')
  46.         // window.addEventListener('scroll',function(){
  47.         //     console.log(111)
  48.         // })
  49.         div.addEventListener('scroll',function(){
  50.             console.log(111)
  51.         })
  52.     </script>
  53. </body>
  54. </html>

 

2. 加载事件  
  1. 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
  2. 为什么要学？
  • 有些时候需要等页面资源全部处理完了做一些事情
  • 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
  1. 事件名：load
  2. 监听页面所有资源加载完毕:给 window 添加 load 事件

 

  • 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件 
  1. 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表图像等完全加载
  2. 事件名：DOMContentLoaded
  3. 监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         body{
  9.             height: 3000px;
  10.         }
  11.         div {
  12.             overflow: auto;
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: pink;
  16.         }
  17.     </style>
  18.     <script>
  19.         window.addEventListener('load',function(){
  20.             let div = document.querySelector('div')
  21.             console.log(div)
  22.         })
  23.     </script>
  24. </head>
  25. <body>
  26.     <div>
  27.         我里面可以放很多内容
  28.         我里面可以放很多内容
  29.         我里面可以放很多内容
  30.         我里面可以放很多内容
  31.         我里面可以放很多内容
  32.         我里面可以放很多内容
  33.         我里面可以放很多内容
  34.         我里面可以放很多内容
  35.         我里面可以放很多内容
  36.         我里面可以放很多内容
  37.         我里面可以放很多内容
  38.         我里面可以放很多内容
  39.         我里面可以放很多内容
  40.         我里面可以放很多内容
  41.         我里面可以放很多内容
  42.         我里面可以放很多内容
  43.         我里面可以放很多内容
  44.         我里面可以放很多内容
  45.         我里面可以放很多内容
  46.         我里面可以放很多内容
  47.         我里面可以放很多内容
  48.         我里面可以放很多内容
  49.     </div>
  50. </body>
  51. </html>

1. 页面滚动事件如何添加？

 scroll

 监听整个页面滚动给 window 或 document 加 2. 加载事件有哪两个？如何添加？

 load 事件

 监听整个页面资源给 window 加

 DOMContentLoaded

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

 

三.元素大小和位置  

目标：掌握元素大小和位置的获取方法，为后续网页特效打基础 

 1.scroll家族

获取宽高：

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

获取位置:

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             overflow: auto;
  10.             width: 150px;
  11.             height: 160px;
  12.             background-color: pink;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div>
  18.         我有很多很多的内容
  19.         我有很多很多的内容
  20.         我有很多很多的内容
  21.         我有很多很多的内容
  22.         我有很多很多的内容
  23.         我有很多很多的内容
  24.         我有很多很多的内容
  25.         我有很多很多的内容
  26.         我有很多很多的内容
  27.         我有很多很多的内容
  28.         我有很多很多的内容
  29.         我有很多很多的内容
  30.         我有很多很多的内容
  31.         我有很多很多的内容
  32.         我有很多很多的内容
  33.         我有很多很多的内容
  34.         我有很多很多的内容
  35.         我有很多很多的内容
  36.         我有很多很多的内容
  37.     </div>
  38.     <script>
  39.         // scrollWidth 和 scrollHeight 是内容的高和宽
  40.         let div = document.querySelector('div')
  41.         console.log(div.scrollWidth)
  42.         console.log(div.scrollHeight)
  43.         // 2.被卷去得头部和左侧
  44.         // div.addEventListener('scroll',function(){
  45.         //     console.log(this.scrollTop)
  46.         // })
  47.     </script>
  48. </body>
  49. </html>

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         body{
  9.             height: 3000px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <script>
  15.         console.log(document.documentElement)  //返回html元素
  16.         // 可以修改 但不要带单位
  17.  
  18.         // 先做页面滚动事件
  19.         window.addEventListener('scroll',function(){
  20.             // console.log(11)
  21.             // 在页面滚动的距离 scrollTop
  22.             console.log(document.documentElement.scrollTop)
  23.             // document.documentElement.scrollTop = 500
  24.         })
  25.     </script>
  26. </body>
  27. </html>

1. scrollWidth和scrollHeight是得到元素什么的宽高？

 内容

 不包含滚动条

2. 被卷去的头部或者左侧用那个属性？是否可以读取和修改？

 scrollTop / scrollLeft

 可以读取，也可以修改（赋值）

3. 检测页面滚动的头部距离（被卷去的头部）用那个属性？

 document.documentElement.scrollTop

案例:页面滚动显示返回顶部按钮

需求：当页面滚动500像素，就显示返回顶部按钮，否则隐藏， 同时点击按钮，则返回顶部

分析：

  • ①：用到页面滚动事件
  • ②：检测页面滚动大于等于100像素，则显示按钮 ③：点击按钮，则让页面的scrollTop 重置为 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.  
  16.         .content {
  17.             width: 1000px;
  18.             height: 3000px;
  19.             background-color: pink;
  20.             margin: 0 auto;
  21.         }
  22.  
  23.         .backtop {
  24.             display: none;
  25.             width: 50px;
  26.             left: 50%;
  27.             margin: 0 0 0 505px;
  28.             position: fixed;
  29.             bottom: 60px;
  30.             z-index: 100;
  31.         }
  32.  
  33.         .backtop a {
  34.             height: 50px;
  35.             width: 50px;
  36.             background: url(./images/bg2.png) 0 -600px no-repeat;
  37.             opacity: 0.35;
  38.             overflow: hidden;
  39.             display: block;
  40.             text-indent: -999em;
  41.             cursor: pointer;
  42.         }
  43.     </style>
  44. </head>
  45.  
  46. <body>
  47.     <div class="content"></div>
  48.     <div class="backtop">
  49.         <img src="./images/close2.png" alt="">
  50.         <a href="javascript:;"></a>
  51.     </div>
  52.     <script>
  53.         // 0 获取元素
  54.         let backtop = document.querySelector('.backtop')
  55.         // 一. 页面滚动事件
  56.         window.addEventListener('scroll', function () {
  57.             // 2. 页面检测滚动的距离
  58.             // console.log(document.documentElement.scrollTop)
  59.             let num = document.documentElement.scrollTop
  60.             // 3. 进行判断显示和隐藏
  61.             if (num >= 500) {
  62.                 //显示那个元素
  63.                 backtop.style.display = 'block'
  64.             } else {
  65.                 // 否则隐藏元素
  66.                 backtop.style.display = 'none'
  67.             }
  68.  
  69.         })
  70.         // 二、点击链接返回顶部 backtop.children[1]
  71.         backtop.children[1].addEventListener('click', function () {
  72.             // 返回顶部
  73.             // scrollTop 可读写
  74.             document.documentElement.scrollTop = 0
  75.         })        
  76.     </script>
  77. </body>
  78.  
  79. </html>

 

2.offset家族

获取宽高：

  •  获取元素的自身宽高、包含元素自身设置的宽高、padding、border
  •  offsetWidth和offsetHeight

获取位置：

  •  获取元素距离自己定位父级元素的左、上距离
  •  offsetLeft和offsetTop 注意是只读属性
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>Document</title>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         div {
  17.             width: 150px;
  18.             height: 150px;
  19.             background-color: pink;
  20.             overflow: auto;
  21.             padding: 10px;
  22.             border: 10px solid red;
  23.             margin: 100px;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div>
  30.         我有很多很多的内容哦
  31.         我有很多很多的内容哦
  32.         我有很多很多的内容哦
  33.         我有很多很多的内容哦
  34.         我有很多很多的内容哦
  35.         我有很多很多的内容哦
  36.         我有很多很多的内容哦
  37.         我有很多很多的内容哦
  38.         我有很多很多的内容哦
  39.         我有很多很多的内容哦
  40.         我有很多很多的内容哦
  41.         我有很多很多的内容哦
  42.         我有很多很多的内容哦
  43.         我有很多很多的内容哦
  44.     </div>
  45.     <script>
  46.         // scrollWidth scrollHeight  内容 宽高 （了解）
  47.         let div = document.querySelector('div')
  48.         console.log(div.scrollWidth)  // 150 不带单位
  49.         console.log(div.scrollHeight)  // 336 不带单位
  50.         console.log('----------------------------')
  51.         // offset 盒子元素的大小 = 盒子本身的宽度和高度 + padding + border
  52.         console.log(div.offsetWidth)  // 150 不带单位
  53.         console.log(div.offsetHeight)  // 150 不带单位
  54.         // console.log(div.offsetTop)  //
  55.         // console.log(div.offsetLeft)
  56.          // 2. 被卷去的头部和左侧
  57.         // div.addEventListener('scroll', function () {
  58.         //     console.log(document.querySelector('div').scrollTop)
  59.         // })
  60.     </script>
  61. </body>
  62.  
  63. </html>

1. offsetWidth和offsetHeight是得到元素什么的宽高？

 内容 + padding + border

2. offsetTop和offsetLeft 得到位置以谁为准？

 带有定位的父级

 如果都没有则以 文档左上角 为准

案例:仿京东固定导航栏案例

需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出 分析：

①：用到页面滚动事件

②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.  
  16.         .content {
  17.             overflow: hidden;
  18.             width: 1000px;
  19.             height: 3000px;
  20.             background-color: pink;
  21.             margin: 0 auto;
  22.         }
  23.  
  24.         .backtop {
  25.             display: none;
  26.             width: 50px;
  27.             left: 50%;
  28.             margin: 0 0 0 505px;
  29.             position: fixed;
  30.             bottom: 60px;
  31.             z-index: 100;
  32.         }
  33.  
  34.         .backtop a {
  35.             height: 50px;
  36.             width: 50px;
  37.             background: url(./images/bg2.png) 0 -600px no-repeat;
  38.             opacity: 0.35;
  39.             overflow: hidden;
  40.             display: block;
  41.             text-indent: -999em;
  42.             cursor: pointer;
  43.         }
  44.  
  45.         .header {
  46.             position: fixed;
  47.             top: -80px;
  48.             left: 0;
  49.             width: 100%;
  50.             height: 80px;
  51.             background-color: purple;
  52.             text-align: center;
  53.             color: #fff;
  54.             line-height: 80px;
  55.             font-size: 30px;
  56.             transition: all .3s;
  57.         }
  58.  
  59.         .sk {
  60.             width: 300px;
  61.             height: 300px;
  62.             background-color: skyblue;
  63.             margin-top: 600px;
  64.         }
  65.     </style>
  66. </head>
  67.  
  68. <body>
  69.     <div class="header">我是顶部导航栏</div>
  70.     <div class="content">
  71.         <div class="sk">秒杀模块</div>
  72.     </div>
  73.     <div class="backtop">
  74.         <img src="./images/close2.png" alt="">
  75.         <a href="javascript:;"></a>
  76.     </div>
  77.     <script>
  78.         let sk = document.querySelector('.sk')
  79.         let header = document.querySelector('.header')
  80.         // 1. 页面滚动事件
  81.         window.addEventListener('scroll', function () {
  82.             // console.log(11)
  83.             // 要检测滚动的距离
  84.             // console.log(document.documentElement.scrollTop)
  85.             // console.log(sk.offsetTop)
  86.             // 2. 要检测滚动的距离 >= 秒杀模块的offsetTop 则滑入
  87.             if (document.documentElement.scrollTop >= sk.offsetTop) {
  88.                 // alert('改吃饭了')
  89.                 header.style.top = '0'
  90.             } else {
  91.                 header.style.top = '-80px'
  92.             }
  93.         })
  94.  
  95.     </script>
  96. </body>
  97.  
  98. </html>

 

案例:电梯导航案例

需求：点击可以页面调到指定效果 分析：

①：点击当前 小导航，当前添加active，其余移除active

②：得到对应 内容 的 offsetTop值 ③：让页面的 scrollTop 走到 对应 内容 的 offsetTop

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .aside {
  16.             position: fixed;
  17.             left: 0;
  18.             top: 50%;
  19.             transform: translateY(-50%);
  20.         }
  21.  
  22.         .item {
  23.             height: 40px;
  24.             line-height: 40px;
  25.             text-align: center;
  26.             padding: 0 10px;
  27.             cursor: pointer;
  28.         }
  29.  
  30.         .active {
  31.             background-color: red;
  32.             color: #fff;
  33.         }
  34.  
  35.         .content {
  36.             width: 660px;
  37.             margin: 400px auto;
  38.         }
  39.  
  40.         .neirong {
  41.             height: 300px;
  42.             margin-bottom: 20px;
  43.             color: #fff;
  44.         }
  45.  
  46.         .content1 {
  47.             background-color: red;
  48.         }
  49.  
  50.         .content2 {
  51.             background-color: blue;
  52.         }
  53.  
  54.         .content3 {
  55.             background-color: orange;
  56.         }
  57.  
  58.         .content4 {
  59.             background-color: yellowgreen;
  60.         }
  61.     </style>
  62. </head>
  63.  
  64. <body>
  65.  
  66.     <div class="aside">
  67.         <div class="item active">男装/女装</div>
  68.         <div class="item">儿童服装/游乐园</div>
  69.         <div class="item">电子产品</div>
  70.         <div class="item">电影/美食</div>
  71.     </div>
  72.  
  73.     <div class="content">
  74.         <div class="neirong content1">男装/女装</div>
  75.         <div class="neirong content2">儿童服装/游乐园</div>
  76.         <div class="neirong content3">电子产品</div>
  77.         <div class="neirong content4">电影/美食</div>
  78.     </div>
  79.  
  80.     <script>
  81.         // 1. 获元取素  
  82.         let items = document.querySelectorAll('.item')
  83.         // 内容的盒子获取
  84.         let neirongs = document.querySelectorAll('.neirong')
  85.         // 2. 左侧aside 模块 点击谁，谁高亮
  86.         for (let i = 0; i < items.length; i++) {
  87.             items[i].addEventListener('click', function () {
  88.                 // 找到上一个active 移除类
  89.                 document.querySelector('.aside .active').classList.remove('active')
  90.                 // 点击谁谁添加类
  91.                 this.classList.add('active')
  92.                 // 3. 右侧内容跟随走动  让页面滚动到对应的offsetTop值位置
  93.                 // console.log(neirongs[i].offsetTop) 不用给单位
  94.                 document.documentElement.scrollTop = neirongs[i].offsetTop
  95.             })
  96.         }
  97.     </script>
  98. </body>
  99.  
  100. </html>
 3.client家族

获取宽高：

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

获取位置：

  •  获取左边框和上边框宽度
  •  clientLeft和clientTop 注意是只读属性

 

会在窗口尺寸改变的时候触发事件：

  •  resize
  •  检测屏幕宽度：
  •  
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>Document</title>
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         div {
  17.             width: 150px;
  18.             height: 150px;
  19.             background-color: pink;
  20.             overflow: auto;
  21.             padding: 10px;
  22.             border: 10px solid red;
  23.             margin: 100px;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div>
  30.         我有很多很多的内容哦
  31.         我有很多很多的内容哦
  32.         我有很多很多的内容哦
  33.         我有很多很多的内容哦
  34.         我有很多很多的内容哦
  35.         我有很多很多的内容哦
  36.         我有很多很多的内容哦
  37.         我有很多很多的内容哦
  38.         我有很多很多的内容哦
  39.         我有很多很多的内容哦
  40.         我有很多很多的内容哦
  41.         我有很多很多的内容哦
  42.         我有很多很多的内容哦
  43.         我有很多很多的内容哦
  44.     </div>
  45.     <script>
  46.         // scrollWidth scrollHeight  内容 宽高 （了解）
  47.         let div = document.querySelector('div')
  48.         console.log(div.scrollWidth)  // 150 不带单位
  49.         console.log(div.scrollHeight)  // 336 不带单位
  50.         console.log('----------------------------')
  51.         // offset 盒子元素的大小 = 盒子本身的宽度和高度 + padding + border
  52.         console.log(div.offsetWidth)  // 150 不带单位
  53.         console.log(div.offsetHeight)  // 150 不带单位
  54.         // console.log(div.offsetTop)  //
  55.         // console.log(div.offsetLeft)
  56.         //  client 当前可视区域  不包含滚动条  边框等等
  57.         console.log('----------------------------')
  58.         console.log(div.clientWidth)
  59.         console.log(div.clientHeight)
  60.         console.log(div.clientTop)  // 边框的宽度  了解  呵呵
  61.         console.log(div.clientLeft)
  62.         // 2. 被卷去的头部和左侧
  63.         // div.addEventListener('scroll', function () {
  64.         //     console.log(document.querySelector('div').scrollTop)
  65.         // })
  66.  
  67.  
  68.     </script>
  69. </body>
  70.  
  71. </html>

1. offset家族

 获取元素自身大小：包括自身设置的宽高、padding、border

 获取元素距离定位父级的左和上距离 只读属性

2. client家族

 获取元素可见区域的大小

 获取元素左、上边框距离 只读属性

3. scroll家族

 获取元素内容的总大小

 获取元素向左向上滚出去看不见的距离 可读写属性

 四.综合案例

轮播图案例

 

分析：

需求①：

  • 小图标鼠标经过事件
  • 鼠标经过小图片，当前高亮，其余兄弟变淡 添加类

需求② ：

  • 大图片跟随变化
  • 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入 淡出的效果，还是添加类

需求③：

  • 右侧按钮播放效果
  • 点击右侧按钮，可以自动播放下一张图片
  • 需要一个变化量 index 不断自增
  • 然后播放下一张图片
  • 如果到了最后一张，必须要还原为第1张图片 教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）

需求④：

  • 解决一个BUG
  • 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
  • 解决方案： 让变化量（索引号） 重新赋值为 当前鼠标经过的索引号

需求⑤：

  • 左侧按钮播放效果 点击左侧按钮，可以自动播放上一张图片
  • 需要一个变化量 index 不断自减
  • 然后播放上一张图片
  • 如果到了第一张，必须要从最后一张播放
  • 教你一招： 索引号 = (数组长度 + 索引号) % 数组长度

需求⑥：

  • 因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common

需求⑦：

  • 开启定时器
  • 其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， right.click()

需求⑧：

  • 鼠标经过停止定时器 （清除定时器）
  • 鼠标离开开启定时器 （开启定时器）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>QQ音乐轮播图</title>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.     }
  14.  
  15.     li {
  16.       list-style: none;
  17.     }
  18.  
  19.     .main {
  20.       width: 700px;
  21.       margin: auto;
  22.       background: #000;
  23.     }
  24.  
  25.     .slides {
  26.       height: 320px;
  27.       position: relative;
  28.     }
  29.  
  30.     .slides ul li {
  31.       /* display: none; */
  32.       position: absolute;
  33.       top: 0;
  34.       left: 0;
  35.       opacity: 0;
  36.       /* 这里实现淡入淡出的关键 */
  37.       transition: all .3s;
  38.     }
  39.  
  40.  
  41.     .slides li.active {
  42.       /* display: block; */
  43.       opacity: 1;
  44.     }
  45.  
  46.     .slides .extra {
  47.       width: 700px;
  48.       height: 53px;
  49.       line-height: 53px;
  50.       position: absolute;
  51.       bottom: 0px;
  52.       background-color: rgba(0, 0, 0, 0.8);
  53.       z-index: 10;
  54.     }
  55.  
  56.     .slides .extra h3 {
  57.       width: 82%;
  58.       margin: 0;
  59.       margin-right: 20px;
  60.       padding-left: 20px;
  61.       color: #98E404;
  62.       font-size: 28px;
  63.       float: left;
  64.       font-weight: 500;
  65.       font-family: "Microsoft Yahei", Tahoma, Geneva;
  66.     }
  67.  
  68.     .slides .extra a {
  69.       width: 30px;
  70.       height: 29px;
  71.       display: block;
  72.       float: left;
  73.       margin-top: 12px;
  74.       margin-right: 3px;
  75.       background-image: url(./assets/icon_focus_switch.png);
  76.     }
  77.  
  78.     .slides .extra .prev {
  79.       background-position: 0 0;
  80.     }
  81.  
  82.     .slides .extra .prev:hover {
  83.       background-position: -30px 0;
  84.     }
  85.  
  86.     .slides .extra .next {
  87.       background-position: -60px 0;
  88.     }
  89.  
  90.     .slides .extra .next:hover {
  91.       background-position: -90px 0;
  92.     }
  93.  
  94.     .indicator {
  95.       padding: 10px 0;
  96.     }
  97.  
  98.     .indicator ul {
  99.       list-style-type: none;
  100.       margin: 0 0 0 4px;
  101.       padding: 0;
  102.       overflow: hidden;
  103.     }
  104.  
  105.     .indicator ul li {
  106.       position: relative;
  107.       float: left;
  108.       width: 60px;
  109.       margin: 0 4px 0 5px;
  110.       text-align: center;
  111.  
  112.       cursor: pointer;
  113.     }
  114.  
  115.     .indicator li img {
  116.       display: block;
  117.       border: 0;
  118.       text-align: center;
  119.       width: 60px;
  120.     }
  121.  
  122.     .indicator li .mask {
  123.       width: 60px;
  124.       height: 60px;
  125.       position: absolute;
  126.       top: 0;
  127.       left: 0;
  128.       background-color: rgba(0, 0, 0, 0.4);
  129.     }
  130.  
  131.     .indicator li .border {
  132.       display: none;
  133.       width: 54px;
  134.       position: absolute;
  135.       bottom: 0;
  136.       left: 0;
  137.       z-index: 20;
  138.       border: 3px solid #98E404;
  139.     }
  140.  
  141.     /* li里面的mask 和 border 刚开始都是显示的 */
  142.     /* 我们写一个样式css */
  143.     .indicator .active .mask {
  144.       display: none;
  145.     }
  146.  
  147.     .indicator .active .border {
  148.       display: block;
  149.     }
  150.   </style>
  151. </head>
  152.  
  153. <body>
  154.   <div class="main">
  155.     <div class="slides">
  156.       <ul>
  157.         <li class="active"><a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息"></a></li>
  158.         <li><a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息"></a></li>
  159.         <li><a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息"></a></li>
  160.         <li><a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息"></a></li>
  161.         <li><a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息"></a></li>
  162.         <li><a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息"></a></li>
  163.         <li><a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息"></a></li>
  164.         <li><a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息"></a></li>
  165.         <li><a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息"></a></li>
  166.         <li><a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息"></a></li>
  167.       </ul>
  168.  
  169.       <div class="extra">
  170.         <h3>第1张图的描述信息</h3>
  171.         <a class="prev" href="javascript:;"></a>
  172.         <a class="next" href="javascript:;"></a>
  173.       </div>
  174.     </div>
  175.     <div class="indicator">
  176.       <ul>
  177.         <li class="active">
  178.           <img src="assets/s_01.jpg">
  179.           <span class="mask"></span>
  180.           <span class="border"></span>
  181.         </li>
  182.         <li>
  183.           <img src="assets/s_02.jpg">
  184.           <span class="mask"></span>
  185.           <span class="border"></span>
  186.         </li>
  187.         <li>
  188.           <img src="assets/s_03.jpg">
  189.           <span class="mask"></span>
  190.           <span class="border"></span>
  191.         </li>
  192.         <li>
  193.           <img src="assets/s_04.jpg">
  194.           <span class="mask"></span>
  195.           <span class="border"></span>
  196.         </li>
  197.         <li>
  198.           <img src="assets/s_05.jpg">
  199.           <span class="mask"></span>
  200.           <span class="border"></span>
  201.         </li>
  202.         <li>
  203.           <img src="assets/s_06.jpg">
  204.           <span class="mask"></span>
  205.           <span class="border"></span>
  206.         </li>
  207.         <li>
  208.           <img src="assets/s_07.jpg">
  209.           <span class="mask"></span>
  210.           <span class="border"></span>
  211.         </li>
  212.         <li>
  213.           <img src="assets/s_08.jpg">
  214.           <span class="mask"></span>
  215.           <span class="border"></span>
  216.         </li>
  217.         <li>
  218.           <img src="assets/s_09.jpg">
  219.           <span class="mask"></span>
  220.           <span class="border"></span>
  221.         </li>
  222.         <li>
  223.           <img src="assets/s_10.jpg">
  224.           <span class="mask"></span>
  225.           <span class="border"></span>
  226.         </li>
  227.       </ul>
  228.     </div>
  229.   </div>
  230.   <script>
  231.     // 轮播图开始啦
  232.     // 需求①：小图标鼠标经过事件
  233.     //   鼠标经过小图片，当前高亮，其余兄弟变淡  添加类
  234.     let lis = document.querySelectorAll('.indicator li')
  235.     let piclis = document.querySelectorAll('.slides ul li')
  236.     let text = document.querySelector('.extra h3')
  237.     let next = document.querySelector('.next')
  238.     let prev = document.querySelector('.prev')
  239.     let main = document.querySelector('.main')
  240.  
  241.     // 给多个小li绑定事件
  242.     for (let i = 0; i < lis.length; i++) {
  243.       lis[i].addEventListener('mouseenter', function () {
  244.         // 选出唯一的那个active ，删除类
  245.         document.querySelector('.indicator .active').classList.remove('active')
  246.         // 鼠标经过谁，谁加上active 这个类
  247.         this.classList.add('active')
  248.  
  249.         // 需求② ：大图片跟随变化  一定要放到鼠标经过事件里面
  250.         // 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入      淡出的效果，还是添加类
  251.         // 选出唯一的那个active ，删除类
  252.         document.querySelector('.slides ul .active').classList.remove('active')
  253.         // 对应序号的那个 li，谁加上active 这个类
  254.         piclis[i].classList.add('active')
  255.         text.innerHTML = `第${i + 1}张图的描述信息`
  256.  
  257.         // 需求④：解决一个BUG
  258.         // 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
  259.         // 解决方案：  让变化量 index 重新赋值为 当前鼠标经过的索引号
  260.         // 鼠标经过了那个小li 他的索引号就是 i 
  261.         // 右侧按钮是通过 index 来了控制播放的
  262.         index = i
  263.       })
  264.     }
  265.  
  266.  
  267.     // 需求③：右侧按钮播放效果
  268.     //   点击右侧按钮，可以自动播放下一张图片
  269.     //   需要一个变化量  index 不断自增
  270.     //   然后播放下一张图片
  271.     //   如果到了最后一张，必须要还原为第1张图片
  272.     //   教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
  273.     let index = 0  // 全局变量  信号量 控制器 为了给 右侧按钮和左侧按钮同时使用
  274.     next.addEventListener('click', function () {
  275.       index++
  276.       // 选出 index 小图片 做操作
  277.       // console.log(index)
  278.       // if (index === lis.length) {
  279.       //   index = 0
  280.       // }
  281.       index = index % lis.length
  282.       common()
  283.  
  284.     })
  285.  
  286.     // 需求⑤：左侧按钮播放效果
  287.     //   点击左侧按钮，可以自动播放上一张图片
  288.     //   需要一个变化量  index 不断自减
  289.     //   然后播放上一张图片
  290.     //   如果到了第一张，必须要从最后一张播放
  291.     //   教你一招： 索引号 = (数组长度 + 索引号) % 数组长度
  292.     prev.addEventListener('click', function () {
  293.       index--
  294.       // 选出 index 小图片 做操作
  295.       // console.log(index)
  296.       if (index < 0) {
  297.         index = lis.length - 1
  298.       }
  299.       // index = (lis.length + index) % lis.length
  300.       common()
  301.  
  302.     })
  303.  
  304.     // 需求⑥：
  305.     //   因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common
  306.     function common() {
  307.       document.querySelector('.indicator .active').classList.remove('active')
  308.       lis[index].classList.add('active')
  309.       // 选出 index 大图片 做操作
  310.       document.querySelector('.slides ul .active').classList.remove('active')
  311.       piclis[index].classList.add('active')
  312.       text.innerHTML = `第${index + 1}张图的描述信息`
  313.     }
  314.  
  315.  
  316.  
  317.     // 需求⑦：开启定时器
  318.     //   其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， next.click()
  319.     let timer = setInterval(function () {
  320.       // 自动调用右侧按钮的点击事件
  321.       next.click()
  322.     }, 1000)
  323.     // 需求⑧：
  324.     //   鼠标经过停止定时器 （清除定时器）
  325.  
  326.     main.addEventListener('mouseenter', function () {
  327.       clearInterval(timer)
  328.     })
  329.     //   鼠标离开开启定时器 （开启定时器）
  330.     main.addEventListener('mouseleave', function () {
  331.       timer = setInterval(function () {
  332.         // 自动调用右侧按钮的点击事件
  333.         next.click()
  334.       }, 1000)
  335.     })
  336.   </script>
  337. </body>
  338.  
  339. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/339733
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号