3.3.2JavaScript网页编程——WebAPI（JS之DOM网页特效篇）

最新推荐文章于 2024-05-03 11:08:18 发布

lanmy_dl

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量407

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/lanmy_dl/article/details/127436016

版权

DOM续2

手风琴

图片自己找来替代，需求代码里面说明了

在这里插入图片描述

<!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>
  // 1. li 默认有个宽度是 240像素  
  // 2. 当我们鼠标经过， 当前的小li 宽度变大 800px 其余的小li 变为 100px 
  // 3. 鼠标离开事件， 所有的小li 都要复原 宽度为 240px

  // 获取所有的li元素
  let lis = document.querySelectorAll('li')
  // 为每一个li绑定事件，mouseenter
  for(let i = 0; i < lis.length; i++){ //遍历

    //1.绑定鼠标扫过进入事件
    lis[i].addEventListener('mouseenter', function() { //对于每一个添加事件

      for(let j = 0; j < lis.length; j++){    //事件就是排他思想：对于每一个的都先设置100px
        lis[j].style.width = '100px'
      }
      //复活自己
        lis[i].style.width = '800px'

      //不能用改进思想的原因是，除了这个变了其他的也变得和原来的不一样，如果只是这个变其余不变，可以单独给他加类名，找到然后移除这个类名
    })   
    
    //2.绑定离开事件
    lis[i].addEventListener('mouseleave', function() {
      //鼠标离开，所有的块100px
      for(let j = 0; j < lis.length; j++){    //事件就是排他思想：对于每一个的都先设置100px
        lis[j].style.width = '240px'
      }
      //this.style.width = '100px' //这个不可以因为所有块的大小都变了
    })
    
  }

  
</script>

</html>

滚动scroll

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

如下图，既可以直接给给 window 或 document 添加 scroll 事件（推荐）；也可以监听某个元素的内部滚动直接给某个元素加即可（div的css样式中，超了的文本overflow:auto就可以滚动了）

在这里插入图片描述

加载事件

加载事件load

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件（必须等所有资源加载完）
在这里插入图片描述

如下图，如果把js写进head里面，而无非获得div，就可以直接获取元素后load

加载事件DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表
、图像等完全加载（只需要DOM渲染完，无需资源加载完）
事件名：DOMContentLoaded
监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

在这里插入图片描述

元素大小和位置

scroll家族(scroll事件之下）

我们想要页面滚动一段距离，比如100px，就让某些元素
显示隐藏，那我们怎么知道，页面滚动了100像素呢？
就可以使用scroll 来检测页面滚动的距离

获取宽高scrollWidth和scrollHeight：

获取元素的内容宽高（不包含滚动条）返回值不带单位。scrollWidth（内容的宽，不包含滚动条的宽）和scrollHeight（内容的高，可能被隐藏，但是还是内容的高），例如下面的div是150px,150px，但scrollWidth是133，scrollHeight是378。

在这里插入图片描述

获取位置scrollLeft和scrollTop:

获取元素内容往左、往上滚出去看不到的距离，这两个属性是可读取，也可以修改（赋值）

在这里插入图片描述

检测页面滚动的头部距离（被卷去的头部）用那个属性:document.documentElement 返回对象为HTML元素

在这里插入图片描述

在这里插入图片描述

备注：第二点可以拿到window.addEventListener里面，但时滚一次触发一次，没有意义且慢

offset家族

使用场景：前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示…

获取宽高offsetWidth和offsetHeight：

获取元素的自身宽高=包含元素自身设置的宽高+padding+border

获取位置offsetLeft和offsetTop：

获取元素距离自己定位父级元素的左、上距离（如果没有定位的父亲，那就以文档左上角为主），注意offsetLeft和offsetTop是只读属性

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

在这里插入图片描述

案例——电梯导航案例
需求：点击可以页面调到指定效果
分析：
①：点击当前小导航，当前添加active，其余移除active
②：得到对应内容的 offsetTop值
③：让页面的 scrollTop 走到对应内容的 offsetTop
在这里插入图片描述

client家族

获取宽高clientWidth和clientHeight：

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

可以用于媒体查询，获取当前窗口的大小从而改变样式，窗口改变resize事件

在这里插入图片描述
2. 获取位置clientLeft和clientTop：（了解）

获取左边框和上边框宽度，注意是只读属性
因为获取边框我们可以直接设置border属性嘛

总结

1. scroll家族
 获取元素内容的总大小
 获取元素向左向上滚出去看不见的距离可读写属性
2. offset家族
 获取元素自身大小：包括自身设置的宽高、padding、border
 获取元素距离定位父级的左和上距离只读属性
3. client家族
 获取元素可见区域的大小
 获取元素左、上边框距离只读属性

轮播图案例

一个一个小需求写，简单的
动手敲完这个案例掌握鼠标事件

补充

css设置margin:0;padding:0是因为body有8px的外边距

lanmy_dl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
3.3.2JavaScript网页编程——WebAPI（JS之DOM网页特效篇）

1.scroll家族 获取元素内容的总大小 获取元素向左向上滚出去看不见的距离可读写属性2.offset家族 获取元素自身大小：包括自身设置的宽高、padding、border 获取元素距离定位父级的左和上距离只读属性3.client家族 获取元素可见区域的大小 获取元素左、上边框距离只读属性。
复制链接

扫一扫