DOM- 网页特效篇
滚动事件和加载事件
滚动事件 scroll
1.初识滚动事件
定义 scroll
当页面进行滚动时触发的事件
作用
很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
2.滚动事件使用
-
监听整个页面滚动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StGRWy6x-1649939359890)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649820748087.png)]
给 window 或 document 添加 scroll 事件
// 整个网页滚动使用window window.addEventListener('scroll', function () { console.log('window开始滚动啦'); }) -
监听某个元素的内部滚动直接给某个元素加即可
// 让单个元素滚动,使用单个元素绑定即可 let div = document.querySelector('div') div.addEventListener('scroll', function () { console.log('div开始gun'); })
3.滚动事件案例
页面整体分为三个部分，当下拉页面的时候，中间部分触碰到顶部时就定位不动。且下拉到一定距离时，会出现一个“火箭”点击图片，点击之后可以缓慢的返回到顶部（不是立即就返回顶部，而是以动画的形式）
<!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;
}
header {
height: 200px;
background-color: pink;
}
nav {
height: 250px;
background-color: yellow;
}
div {
background-color: aqua;
}
.fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
a {
width: 150px;
height: 195px;
position: fixed;
bottom: 100px;
right: 50px;
background-image: url(../02-网页特效学习/04-小火箭/images/gotop.png);
display: none;
}
a:hover {
background-image: url(../02-网页特效学习/04-小火箭/images/gotop.gif);
}
/* a {
width: 150px;
height: 195px;
position: fixed;
bottom: 100px;
right: 50px;
background-image: url(./images/gotop.png);
/* display: none; */
</style>
</head>
<body>
<header></header>
<nav></nav>
<div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
</div>
<a href="javascript:;"></a>
<script>
let header = document.querySelector('header')
let nav = document.querySelector('nav')
let a = document.querySelector('a')
window.addEventListener('scroll', function () {
let scrollTop = document.documentElement.scrollTop;
if (scrollTop >= 200) {
nav.classList.add('fix')
header.style.marginBottom = 240 + 'px'
} else {
nav.classList.remove('fix')
header.style.marginBottom = 0
};
if (scrollTop >= 2000) {
a.style.display = 'block';
} else {
a.style.display = 'none';
};
})
a.addEventListener('click', function () {
let timeId = setInterval(() => {
document.documentElement.scrollTop -= 100;
if (document.documentElement.scrollTop === 0) {
clearInterval(timeId)
}
}, 20);
})
</script>
</body>
</html>
加载事件 load
1.初识加载事件
定义
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
学习的原因
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
2.使用
load
事件名：load
监听页面所有资源加载完毕
-
作用：当要获取资源信息的属性时（比如获取图片的高度），需要资源全部加载出来之后才可以获取，就需要在window load 中进行资源全部加载，之后才可以成功获取。
-
给 window 添加 load 事件
-
需要所有的标签以及内容资源全部加载出来才触发
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ra0XNWbT-1649939359891)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649824517211.png)]
window.addEventListener('load', function () { console.log('需要资源全部加载完才触发'); }) -
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
DOMContentLoaded
事件名：DOMContentLoaded
监听页面DOM加载完毕：标签加载完即可触发
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
监听页面DOM加载完毕：
-
给 document 添加 DOMContentLoaded 事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvyWnbaY-1649939359891)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649824725807.png)]
document.addEventListener('DOMContentLoaded', function () { console.log('标签加载完就触发'); })
元素大小和位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FO7zhUZp-1649939359891)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649906485088.png)]
scroll家族
1.初识scroll
使用场景
- 我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，那我们怎么知道，页面滚动了100像素呢？
- 就可以使用scroll 来检测页面滚动的距离~~~
获取宽高
-
获取元素的**内容总宽高（ 内容+内边距-滚动条）**返回值不带单位
-
scrollWidth和scrollHeight
- scrollWidth 不包含 滚动条 大小（滚动的宽度等于 = 元素的宽度 - 滚动条的宽度 ）
- scrollWidth 等于容器可以滚动的大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTEGRusa-1649939359892)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649824968473.png)]
获取当前容器的宽度跟高度(如果内容的宽高大于盒子的宽高,宽高会被内容刷新)
<script> const div = document.querySelector('div') console.log(div.scrollHeight); console.log(div.scrollWidth); </script>
获取位置
-
获取元素内容往左、往上滚出去看不到的距离
-
scrollLeft和scrollTop
-
这两个属性是可以修改的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSZvYCD5-1649939359892)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649825035210.png)]
2.页面滚动事件
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1v7lOSC-1649939359892)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649825124489.png)]
-
代码展示
window.addEventListener('scroll', function () { let scrollTop = document.documentElement.scrollTop console.log(scrollTop); })<script> const div = document.querySelector('div') div.addEventListener('scroll', function () { console.log(div.scrollHeight); console.log(div.scrollWidth); }) </script> -
注意事项
-
document.documentElement HTML 文档返回对象为HTML元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mi7ohcwU-1649939359893)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649825379417.png)]
-
3.总结
- 页面滚动 使用 window.addEventListener(“scroll”) 事件
页面的滚动距离 document.documentElement.scrollTop
-
元素滚动 dom.addEventListener(“scroll”)
-
获取元素滚动的距离
- dom.scrollTop
- dom.scrollLeft
-
scrollWidth 整个可以滚动的区间的宽度
-
scrollHeight 整个可以滚动的区域的高度
-
细节
- PC端的滚动条大小 17px
- *移动端的滚动条 不占大小
4.案例
页面滚动显示返回顶部按钮
<!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;
}
header {
height: 200px;
background-color: pink;
}
nav {
height: 250px;
background-color: yellow;
}
div {
background-color: aqua;
}
.fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
a {
width: 150px;
height: 195px;
position: fixed;
bottom: 100px;
right: 50px;
background-image: url(../02-网页特效学习/04-小火箭/images/gotop.png);
display: none;
}
a:hover {
background-image: url(../02-网页特效学习/04-小火箭/images/gotop.gif);
}
/* a {
width: 150px;
height: 195px;
position: fixed;
bottom: 100px;
right: 50px;
background-image: url(./images/gotop.png);
/* display: none; */
</style>
</head>
<body>
<header></header>
<nav></nav>
<div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
</div>
<a href="javascript:;"></a>
<script>
let header = document.querySelector('header')
let nav = document.querySelector('nav')
let a = document.querySelector('a')
window.addEventListener('scroll', function () {
let scrollTop = document.documentElement.scrollTop;
if (scrollTop >= 200) {
nav.classList.add('fix')
header.style.marginBottom = 240 + 'px'
} else {
nav.classList.remove('fix')
header.style.marginBottom = 0
};
if (scrollTop >= 2000) {
a.style.display = 'block';
} else {
a.style.display = 'none';
};
})
a.addEventListener('click', function () {
let timeId = setInterval(() => {
document.documentElement.scrollTop -= 100;
if (document.documentElement.scrollTop === 0) {
clearInterval(timeId)
}
}, 20);
})
</script>
</body>
</html>
offset家族
1.初识offset
使用场景
- 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。
- 简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示…
获取宽高
offset 的宽度跟高度是包含滚动条的（也就是整个元素的宽高->内容 + padding + border）
offset 的 宽高 不计算被内容撑开的滚动区域—>可视区
-
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
-
offsetWidth和offsetHeight
<script> const son = document.querySelector('.son') console.log(son.offsetHeight); console.log(son.offsetWidth); </script>
获取位置
-
获取元素距离自己定位父级元素的左、上距离
-
offsetLeft和offsetTop 注意是只读属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xlbwmGeR-1649939359893)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649905376207.png)]
获取元素的位置
获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)**
<script> const son = document.querySelector('.son') console.log(son.offsetHeight); console.log(son.offsetWidth); console.log(son.offsetLeft);//距离左侧的距离 console.log(son.offsetTop);//距离顶部的距离 </script>
2.总结
- offsetWidth 获取元素的宽度 包含这滚动条
- offsetHeight 获取元素的高度 包含这滚动条
- offsetLeft 获取定位了的父元素的 水平距离 左
- offsetTop 获取定位了的父元素的 垂直距离 上
client家族
初识client
获取宽高
-
获取元素的可见部分宽高（不包含边框，滚动条等）
-
clientWidth和clientHeight
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N05rgH46-1649939359893)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.assets/1649906988224.png)]
client 获取的宽高要减去 滚动条
<script> const box = document.querySelector('.box') console.log(box.clientHeight); // 不包含 滚动条（类似 scrollWidth） console.log(box.clientWidth);// 不包含 滚动条（类似 scrollHeight） </script>
获取位置
-
获取左边框和上边框宽度(没有右边框跟下边框)
-
clientLeft和clientTop
<script> const box = document.querySelector('.box') console.log(box.clientHeight); console.log(box.clientWidth); console.log(box.clientLeft);//获取 左 边框的宽度 console.log(box.clientTop);//获取 上 边框的宽度 </script>
总结
- width
- scollWidth 获取容器的宽度（包含滚动的区域）
- offsetWidth 获取可视区域的宽度（包含滚动条）
- clientWidth 获取可视区域的宽度（不包含滚动条）
- left
- scrollLeft 获取左侧滚动的距离
- offsetLeft 获取和已经定位了的父级元素的左距离
')
console.log(box.clientHeight); // 不包含 滚动条（类似 scrollWidth）
console.log(box.clientWidth);// 不包含 滚动条（类似 scrollHeight）
##### 获取位置
- 获取左边框和上边框宽度(没有右边框跟下边框)
- clientLeft和clientTop
```js
<script>
const box = document.querySelector('.box')
console.log(box.clientHeight);
console.log(box.clientWidth);
console.log(box.clientLeft);//获取 左 边框的宽度
console.log(box.clientTop);//获取 上 边框的宽度
</script>
总结
- width
- scollWidth 获取容器的宽度（包含滚动的区域）
- offsetWidth 获取可视区域的宽度（包含滚动条）
- clientWidth 获取可视区域的宽度（不包含滚动条）
- left
- scrollLeft 获取左侧滚动的距离
- offsetLeft 获取和已经定位了的父级元素的左距离
- clientLeft 获取左边框的大小
1165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
