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

    目录

    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>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107

    滚动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 来检测页面滚动的距离

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

    在这里插入图片描述
    在这里插入图片描述

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

    在这里插入图片描述

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

    在这里插入图片描述

    • 案例——返回顶部

    在这里插入图片描述

    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    备注： 第二点可以拿到window.addEventListener里面，但时滚一次触发一次，没有意义且慢

    offset家族

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

    1. 获取宽高offsetWidth和offsetHeight：
    • 获取元素的自身宽高=包含元素自身设置的宽高+padding+border
    1. 获取位置offsetLeft和offsetTop：
    • 获取元素距离自己定位父级元素的左、上距离（如果没有定位的父亲，那就以文档左上角为主），注意offsetLeft和offsetTop是只读属性

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

    在这里插入图片描述

    在这里插入图片描述

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

    client家族

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

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

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

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

    总结

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

    轮播图案例

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

    补充

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

  • 相关阅读:
    tauri为窗口添加阴影效果
    数据可视化与GraphQL：利用Apollo创建仪表盘
    2023年国自然植物科学相关面上项目信息公布（小麦、大麦、棉花、大豆、玉米）
    Falcon-7B大型语言模型在心理健康对话数据集上使用QLoRA进行微调
    数据结构与算法_二叉搜索树
    学习ros1很好的免费教材：wiki.ros.org/cn
    cmake 中经常出现的 关键词 scope 中的 三种：PUBLIC PRIVATE INTERFACE
    C++中的代码重用
    移动端抓包
    Vue3 京东到家项目实战第二篇（商家详情页面及购物车完整逻辑开发） 进阶式掌握vue3完整知识体系
  • 原文地址：https://blog.csdn.net/lanmy_dl/article/details/127436016