关于页面元素的宽高属性的三大家族(offset、scroll、client)

最新推荐文章于 2024-02-01 17:00:52 发布
最新推荐文章于 2024-02-01 17:00:52 发布
阅读量736 收藏 3
点赞数 3
文章标签： css css3 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40630195/article/details/122143482
版权
本文详细介绍了网页布局中的offset、scroll和client家族，以及如何获取元素的宽高和位置。接着讨论了如何获取网页的滚动距离，并展示了如何实现固定导航栏和响应式布局。最后，通过电梯导航和手风琴效果的案例，深入探讨了网页交互的实现技巧，包括页面滚动跟随和元素展开收缩的动态效果。
摘要由CSDN通过智能技术生成

01-三大家族(offset、scroll、client)

在这里插入图片描述

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zw9ihXLj-1640414831672)(day05.assets/1554473815720-1637084942857.png)]

1.1-三大家族

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>标题</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 150px;
        height: 150px;
        background-color: pink;
        overflow: auto;
        padding: 10px;
        border: 10px solid red;
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
      我有很多很多的内容哦 我有很多很多的内容哦
    </div>

    <script>
      /*三大家族
        1.offset家族 ： 获取 “元素自身”  的真实宽高与位置
            offsetWidth/offsetHeight : 获取自身真实宽高 = width + padding*2 + border*2
            offsetLeft/top : 元素自身 左/上 外边框 到 定位父级  左/下 内边框距离
        2.scroll家族 ： 获取 “元素内容”   的真实宽高与位置
            scrollWidth/scrollHeight :  获取元素‘内容’的宽高
            scrollLeft/scrollTop : 元素内容 左/上 滚动出去的距离
        3.client家族 ： 获取元素‘可视区域’的宽高与位置
            clientWidth/clientHeight : 获取元素‘可视区域’的宽高
            clientLeft/clientTop : 获取元素‘可视区域’的位置（左边框与右边框）
    
     三大家族特点
        (1)获取的是number类型
        (2)只能获取，不能设置
     */

      let box = document.querySelector('.box')

      //1.offset家族 ： 获取 “元素自身”  的真实宽高与位置
      console.log(box.offsetWidth, box.offsetHeight) //150 + 10*2 + 10*2 = 190
      console.log(box.offsetLeft, box.offsetTop) //100 100

      //2.scroll家族 ： 获取 “元素内容”   的真实宽高与位置
      console.log(box.scrollWidth, box.scrollHeight)//153  398
      console.log(box.scrollLeft, box.scrollTop)//0  0  滚动条没有滚动就是0

      //3.获取元素‘可视区域’的宽高与位置
      console.log(box.clientWidth, box.clientHeight)//153 170 左边框与上边框宽度
      console.log(box.clientLeft, box.clientTop)//10 10 左边框与上边框宽度
    </script>
  </body>
</html>

1.2-获取网页滚动距离

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


<script>
    /* 学习目标：获取网页滚动距离
            1.给网页注册滚动事件 :  window.onscroll
            2.获取网页滚动距离   ： document.documentElement.scrollLeft
    */

    //1.给页面注册滚动条事件
    window.onscroll = function(){
        //2.获取页面滚动距离 : html标签   
        console.log( document.documentElement.scrollLeft,document.documentElement.scrollTop );
    };
    
</script>
</body>
</html>

1.3-scroll案例：固定导航

  • 需求分析：当页面的顶部区域滚动出去之后，页面的导航栏不再滚动，而是固定在顶部
  • 思路分析：监听页面的滚动，当滚动距离超出顶部区域高度时，设置导航栏为fixed固定定位
    • 通过改变类名即可改变样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>

<div class="top" id="topPart">
    <img id="pic" src="images/top.png" alt=""/>
</div>

<div class="nav" id="navBar">
    <img src="images/nav.png" alt=""/>
</div>

<div class="main" id="mainPart">
    <img src="images/main.png" alt=""/>
</div>

<script>
    /* 
    1.给页面注册滚动条事件 ： 监听垂直方向滚动距离
    2.获取当前滚动的scrollTop,如果超过指定范围就设置为固定导航
     */

    let topPart = document.querySelector('#topPart');
    let navBar = document.querySelector('#navBar');
    let mainPart = document.querySelector('#mainPart');

    //1.给页面注册滚动条事件
    window.onscroll = function(){
        //2.获取网页滚动距离
        let y = document.documentElement.scrollTop;
        if( y >= topPart.offsetHeight ){
            //设置nav为固定定位
            navBar.style.position = 'fixed';
            navBar.style.top = 0;
            /* 注意点：设置为固定定位之后，元素会脱标。下方盒子就会瞬间顶上来，造成顿闪现象
            解决方案：设置下方的元素的margin值，撑开脱标的高度
             */
             mainPart.style.marginTop = 10 + navBar.offsetHeight + 'px';
        }else{
            //设置nav为标准流
            navBar.style.position = 'static';
            //移除下方盒子脱标的margin
            mainPart.style.marginTop = '10px';
        };
    };
</script>
</body>
</html>

1.4-client案例：响应式布局

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

<body>
    <script>
        
        /* 复习响应式布局原理
        1.响应式布局 ： 一个html同时适配多个不同设备
        2.响应式原理： 根据不同屏幕加载不同样式
            a.媒体查询
            b.client家族
        3.响应式布局练习
            设备       尺寸          样式
             大PC      >1200px        红 
             小PC      992-1200px     橙 
             平板      768-992px       黄 
             手机      <768px          绿 
         */

         //1.先给页面注册大小变化事件 ： 监听视口的变化
         window.onresize = function(){
            //2.获取当前视口尺寸
            let w = document.documentElement.clientWidth;
            let h = document.documentElement.clientHeight;
            console.log(w,h);
            

            if( w >= 1200 ){
                document.body.style.backgroundColor = 'red';
            }else if( w > 992){
                document.body.style.backgroundColor = 'orange';
            }else if( w > 768 ){
                document.body.style.backgroundColor = 'yellow';
            }else{
                document.body.style.backgroundColor = 'green';
            };

            /* 横竖屏适配 */
            if( w < h ){
                alert('竖屏');
            }else{
                alert('横屏');
            };
         };

        


    </script>
</body>

</html>

02-网页特效案例

1.1-电梯导航

在这里插入图片描述


<!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;
      }

      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>
  </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>
      // 1. 获元取素
      let items = document.querySelectorAll('.item')
      // 内容的盒子获取
      let neirongs = document.querySelectorAll('.neirong')
      // 2. 左侧aside 模块 点击谁，谁高亮
      for (let i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          // 3.1 找到上一个active 移除类
          document.querySelector('.aside .active').classList.remove('active')
          // 3.2 点击谁谁添加类
          this.classList.add('active')
          // 3.3 右侧内容跟随走动  让页面滚动到对应的offsetTop值位置
          // console.log(neirongs[i].offsetTop) 不用给单位
          document.documentElement.scrollTop = neirongs[i].offsetTop
        }
      }
    </script>
  </body>
</html>

1.2-手风琴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kDSvv9G-1640414831674)(day05.assets/1637085294051.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: 240px;
        height: 400px;
        float: left;
        transition: all 500ms;
      }

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

  <body>
    <div id="box">
      <ul>
        <li>
          <a href="#">
            <img src="./images/1.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/2.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/3.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/4.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/5.jpg" alt="" />
          </a>
        </li>
      </ul>
    </div>
  </body>
  <script>
    /* 思路分析
      li 默认有个宽度是 240像素  
      鼠标移入， 当前的小li 宽度变大 800px 其余的小li 变为 100px 
      鼠标移除， 所有的小li 都要复原 宽度为 240px
  */

    // 1. 获取元素
    let liList = document.querySelectorAll('li')
    // 2. 遍历li元素注册事件
    for (let i = 0; i < liList.length; i++) {
      // 2.1 鼠标移入
      liList[i].onmouseenter = function () {
        // 3.排他思想  干掉所有人 100px，复活我自己 800px
        for (let j = 0; j < liList.length; j++) {
          if (i == j) {
            liList[j].style.width = '800px'
          } else {
            liList[j].style.width = '100px'
          }
        }
      }
      // 2.2 鼠标离开
      liList[i].onmouseleave = function () {
        for (let j = 0; j < liList.length; j++) {
          liList[j].style.width = '240px'
        }
      }
    }
  </script>
</html>

03-综合案例：轮播图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-taA3Mxke-1640414831675)(day05.assets/1637085339187.png)]

1.1-思路分析

/*需求分析 
        *** 轮播图核心思路：一定要有一个全局变量index记录当前的元素下标
    1. 鼠标移入小图片 ： 排他思想，当前移入高亮，其他兄弟变淡
    2. 鼠标点击下一页：  
      (1)index++ , 如果是最后一张则从第0张开始
      排他思想： 当前下标高亮，其他兄弟变淡
    3. 鼠标点击上一页：
      (1)index--, 如果是第一张,则从最后一张开始
      (2)排他思想：当前下标高亮，其他兄弟变淡 
    4.自动轮播
      (1)页面一加载： 开启定时器自动执行下一页代码
      (2)鼠标移入整个轮播图盒子： 切换手动模式（关闭定时器）
      (3)鼠标移出整个轮播图盒子： 切换自动模式（开启定时器）

    */

1.2-小图片移入事件

//1.获取元素
      let liList = document.querySelectorAll('.indicator li') //小图片数组
      let picList = 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') //整个大盒子
      let index = 0 //声明一个全局变量记录当前图片下标

      // 2.1 鼠标移入小图片
      for (let i = 0; i < liList.length; i++) {
        liList[i].onmouseenter = function () {
          // 3.1 排他思想
          //(1)选出唯一的那个active ，删除类
          document
            .querySelector('.indicator .active')
            .classList.remove('active')
          document
            .querySelector('.slides ul .active')
            .classList.remove('active')
          //(2)鼠标经过谁，谁加上active 这个类
          liList[i].classList.add('active')
          picList[i].classList.add('active')
          text.innerHTML = `第${i + 1}张图的描述信息`
          //(3)存储当前移入的下标
          index = i
        }
      }

1.3-上一页下一页

//2.2 下一页
      next.onclick = function () {
        //3.1 下标自增,如果最后一张，从第0张开始
        if (index === liList.length - 1) {
          index = 0
        }else{
          index++
        }
        //3.2 排他思想修改样式
        //(1)选出唯一的那个active ，删除类
        document
          .querySelector('.indicator .active')
          .classList.remove('active')
        document
          .querySelector('.slides ul .active')
          .classList.remove('active')
        //(2)当前下标加上active 这个类
        liList[index].classList.add('active')
        picList[index].classList.add('active')
        text.innerHTML = `第${index + 1}张图的描述信息`
      }

      //2.3 上一页
      prev.onclick = function () {
        //3.1 下标自减,如果最后一张，从第0张开始
        if (index == 0) {
          index = liList.length - 1
        }else{
          index--
        }
        //3.2 排他思想修改样式
        //(1)选出唯一的那个active ，删除类
        document
          .querySelector('.indicator .active')
          .classList.remove('active')
        document
          .querySelector('.slides ul .active')
          .classList.remove('active')
        //(2)当前下标加上active 这个类
        liList[index].classList.add('active')
        picList[index].classList.add('active')
        text.innerHTML = `第${index + 1}张图的描述信息`
      }

1.4-自动轮播

//2.3 自动轮播

      //(1)页面一加载： 开启定时器自动执行下一页代码
      let timer = setInterval(function () {
        // 自动调用右侧按钮的点击事件
        next.click()
      }, 1000)

      //(2)鼠标移入整个轮播图盒子： 切换手动模式（关闭定时器）
      main.onmouseenter = function () {
        clearInterval(timer)
      }
      //(3)鼠标移出整个轮播图盒子： 切换自动模式（开启定时器）
      main.onmouseleave = function () {
        timer = setInterval(function () {
          // 自动调用右侧按钮的点击事件
          next.click()
        }, 1000)
      }

1.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="第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>
    <script>
      /*需求分析 
        *** 轮播图核心思路：一定要有一个全局变量index记录当前的元素下标
    1. 鼠标移入小图片 ： 排他思想，当前移入高亮，其他兄弟变淡
    2. 鼠标点击下一页：  
      (1)index++ , 如果是最后一张则从第0张开始
      排他思想： 当前下标高亮，其他兄弟变淡
    3. 鼠标点击上一页：
      (1)index--, 如果是第一张,则从最后一张开始
      (2)排他思想：当前下标高亮，其他兄弟变淡 
    4.自动轮播
      (1)页面一加载： 开启定时器自动执行下一页代码
      (2)鼠标移入整个轮播图盒子： 切换手动模式（关闭定时器）
      (3)鼠标移出整个轮播图盒子： 切换自动模式（开启定时器）

    */

      //1.获取元素
      let liList = document.querySelectorAll('.indicator li') //小图片数组
      let picList = 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') //整个大盒子
      let index = 0 //声明一个全局变量记录当前图片下标

      // 2.1 鼠标移入小图片
      for (let i = 0; i < liList.length; i++) {
        liList[i].onmouseenter = function () {
          // 3.1 排他思想
          //(1)选出唯一的那个active ，删除类
          document
            .querySelector('.indicator .active')
            .classList.remove('active')
          document
            .querySelector('.slides ul .active')
            .classList.remove('active')
          //(2)鼠标经过谁，谁加上active 这个类
          liList[i].classList.add('active')
          picList[i].classList.add('active')
          text.innerHTML = `第${i + 1}张图的描述信息`
          //(3)存储当前移入的下标
          index = i
        }
      }

      //2.2 下一页
      next.onclick = function () {
        //3.1 下标自增,如果最后一张，从第0张开始
        if (index === liList.length - 1) {
          index = 0
        }else{
          index++
        }
        //3.2 排他思想修改样式
        //(1)选出唯一的那个active ，删除类
        document
          .querySelector('.indicator .active')
          .classList.remove('active')
        document
          .querySelector('.slides ul .active')
          .classList.remove('active')
        //(2)当前下标加上active 这个类
        liList[index].classList.add('active')
        picList[index].classList.add('active')
        text.innerHTML = `第${index + 1}张图的描述信息`
      }

      //2.3 上一页
      prev.onclick = function () {
        //3.1 下标自减,如果最后一张，从第0张开始
        if (index == 0) {
          index = liList.length - 1
        }else{
          index--
        }
        //3.2 排他思想修改样式
        //(1)选出唯一的那个active ，删除类
        document
          .querySelector('.indicator .active')
          .classList.remove('active')
        document
          .querySelector('.slides ul .active')
          .classList.remove('active')
        //(2)当前下标加上active 这个类
        liList[index].classList.add('active')
        picList[index].classList.add('active')
        text.innerHTML = `第${index + 1}张图的描述信息`
      }

      //2.3 自动轮播

      //(1)页面一加载： 开启定时器自动执行下一页代码
      let timer = setInterval(function () {
        // 自动调用右侧按钮的点击事件
        next.click()
      }, 1000)

      //(2)鼠标移入整个轮播图盒子： 切换手动模式（关闭定时器）
      main.onmouseenter = function () {
        clearInterval(timer)
      }
      //(3)鼠标移出整个轮播图盒子： 切换自动模式（开启定时器）
      main.onmouseleave = function () {
        timer = setInterval(funct![在这里插入图片描述](https://img-blog.csdnimg.cn/be93c148fa954e3395ee983cd8f97361.gif)
ion () {
          // 自动调用右侧按钮的点击事件
          next.click()
        }, 1000)
      }
    </script>
  </body>
</html>
码少女壮士
关注
js中offset,client , scroll 三大元素知识点总结
10-16
本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族：offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息，窗口或元素内部的滚动距离等重要数据，对于实现页面布局和交互功能至关重要...
前端攻城狮学习笔记九：让你彻底弄清offset
weixin_30521649的博客
09-03 995
　　很多初学者对于JavaScript中的offset、scroll、client一直弄不明白，虽然网上到处都可以看一张图（图1），但这张图太多太杂，并且由于浏览器差异性，图示也不完全正确。 图一 　　不知道大家看到这张图的第一感觉如何，反正我的感觉就是“这次第，怎一个乱字了得”。 　　既然我认为上图太多太乱，那么我就把offset、scroll、client分开说，希望能让大家彻底弄清...
offset().top与offsetTop的区别
qq_43654065的博客
01-19 2243
转载：原博文地址 offset().top是jQuery的方法，需要引入jQuery才能使用，它获取的是你绑定元素上边框相对于文档顶端的偏移量，我们可以吧文档理解成一幅图，这幅图包含了html，html内容越多图越长，浏览网页时，就是透过透明的玻璃（视窗）在看这幅画。 offsetTop是原生js的方法，它获取的是你绑定元素上边框相对离自己最近且position属性非static的祖先元素的偏移量。 总结 相同点： 当无滚动条且offsetTop与offset().top参照对象相同时，他们获取的值相同。
各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight...
weixin_30525825的博客
08-26 454
1、.position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left； jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top...
.offset().top是什么意思？
weixin_30872671的博客
06-06 1266
offset获取匹配元素在当前视口的相对偏移； 返回的对象包含两个整形属性：top,left。此方法只对 可见元素有效。 $("#div").offset() 获得位移对象；（此时 其实啥也没做） $("#div").offset().top 获得位移高度 用法一般是： $("#div").css({ left:$(this).offset().left+"px", top:...
offset().top和offsetTop
qq_43654065的博客
09-22 604
获取元素距离上方的位置。 区别： offset().top属于jquery方法 offsetTop属于js方法。 没什么区别
javascript中offset、client、scroll的属性总结
10-23
JavaScript作为前端开发中不可或缺的脚本语言，提供了丰富的DOM操作接口，其中offset、client、scroll属性是常用的一组用于获取元素尺寸和位置信息的接口。这组属性可以帮助开发者精确地获取元素的尺寸、位置以及...
三剑客：offset、client和scroll还傻傻分不清？
01-18
在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义：元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定，包括所有内...
JS中涉及到的宽高（三大家族）问题
zhi航的博客
07-04 195
1， offsetLeft([value]) 获取元素距离定位父级左边的的距离，若父级都没有定位，则距离到body。 offsetTop([value]) 获取元素距离定位父级顶部的的距离，若父级都没有定位，则距离到body。 offsetWidth 获取元素自身在浏览器的宽度(width + padding + border) offsetHeight 获取元素自身在浏览器的高度(height+ padding) 2， clientLeft 获取元素...
JQ的offset().top与js的offsetTop区别详解
weixin_30731305的博客
12-20 982
一、前言 最近在做一个图片懒加载的插件，就纵轴(Y轴)而言，我需要时时获取图片的上偏移量，好判断是否已进入视图区域，而我所理解的是offsetTop应该是跟offset().top一样的，然后陷入了因为不了解它们区别，而带来BUG的死坑。这里通过实验整理，做个清晰好懂的笔记，如果你也想弄清，建议复制我的代码跟着操作，印象会更为深刻。 二、offset().top与offsetTop什么意思？它...
offsetTop，offset().top
GUYyyy的博客
10-30 1031
原文：here offsetTop与offset().top相同点： 1.当无滚动条且offsetTop与offset().top参照对象相同时，它们获取的值相同。 offsetTop与offset().top不同点： 1.offset().top与offsetTop偏移量参照对象不同，offset().top始终是文档，而offsetTop参照的对象是可变的。 2.offsetTop获取的偏移量不随滚动条滚动变化，但offset().top随着滚动条变化（注意滚动监听的是一个有滚动条的元素，而不是wind
js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别
Junit的博客
08-12 7912
1.offsetLeft/offsetTop 在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。 2.offset().left/offset().top 返回或设置匹配元素相对于文档的偏移（位置）。 无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。
JS_html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
小歪博客
07-08 299
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对
offsetTop和offset().top
u013742084的专栏
06-01 7656
前段时间写了一个视觉差滚动的demo，是用js实现的。 第二次看这个例子，我想封装一个jquery插件。 首先demo中有两个button需要在jq中对它们进行定位，然而问题来了 我先得到第一张图片的位置，对图片中的button的top进行定位时，想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this
Jquery 中 offset() 方法
10-07 1878
一、语法     1、 返回偏移坐标          $(selector).offset();          top: $(selector).offset().top;          left: $(selector).offset().left;     2、设置偏移坐标：          $(selector).offset({top:val
.offset().top 与 .offsetTop
JennyChen66的博客
11-03 1908
.offset().top 与.offsetTop
关于client/offset/scroll三大家族和getBoundingClientRect和其他获取dom元素高度
最新发布
weixin_58555796的博客
02-01 994
关于client/offset/scroll三大家族和getBoundingClientRect和其他获取dom元素高度
元素大小和位置
m0_67841039的博客
04-07 66
三大家族：scroll家族，offset家族，client家族 1、 scroll： ① scrollWidth、scrollHeight 包含：内容+padding+溢出 ② scrollLeft、scrollTop 注意：除了能获取，还可以设置 例题：（注意：如果整个窗口有了滚动条，scroll加给window/document，卷出去的距离是html的scrollTop） 2、offset： ① offsetWidth、offsetHeight 包含：内容+paddi..
三大家族及经典案例
weixin_64252848的博客
01-22 238
01-三大家族(offset、scroll、client) 1.2-获取网页滚动距离 1.3-scroll案例：固定导航 需求分析：当页面的顶部区域滚动出去之后，页面的导航栏不再滚动，而是固定在顶部 思路分析：监听页面的滚动，当滚动距离超出顶部区域高度时，设置导航栏为fixed固定定位 通过改变类名即可改变样式 1.4-client案例：响应式布局 02-网页特效案例 1.1-电梯导航 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值