1.滚动事件和加载事件
1.滚动事件
1.当页面进行滚动时触发的事件
2.很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
3.事件名：scroll
4.监听整个页面滚动：
//页面滚动事件
window.addEventListener('scroll' , functino(){
//执行的操作
})
//给 window 或 document 添加 scroll 事件
5.监听某个元素的内部滚动直接给某个元素加即可
6.使用方法
<!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;
box-sizing: border-box;
}
div {
width: 400px;
height: 400px;
overflow: auto;
background-color: skyblue;
}
</style>
</head>
<body>
<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>
<script>
// scroll 滚动事件
const div =document.querySelector('div')
div.addEventListener('scroll', function () {
console.log('div开始滚了');
})
</script>
</body>
</html>
2.加载事件
1.加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
2.有些时候需要等页面资源全部处理完了做一些事情 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
3.事件名：load
4.监听页面所有资源加载完毕:给 window 添加 load 事件
//页面加载事件
window.addEventListener('load' , functino(){
//执行的操作
})
5.注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
6.当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表 、图像等完全加载
7.事件名：DOMContentLoaded
8.监听页面DOM加载完毕： 给 document 添加 DOMContentLoaded 事件
//页面加载事件
document.addEventListener('DOMContentLoaded' , functino(){
//执行的操作
})
9.load页面加载资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-页面加载资源事件.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<video
controls
src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/36/82/569828236/569828236-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1649906485&gen=playurlv2&os=cosbv&oi=2028708454&trid=926e1b0362e4450296eda32f1f091968h&platform=html5&upsig=de4859a796154f0ae2152c7a97789a6d&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=414874315&bvc=vod&nettype=0&bw=52793&logo=80000000"
></video>
<script>
/*
有很多业务和功能 都需要使用到外部资源（外部css js 图片 视频）
我们希望等待资源都加载回来，才去做其他事情
写代码的时候，我们会把所有的代码 都写在 window load事件中来确保 资源全部都可以使用
*/
window.addEventListener('load', function () {
console.log('load 标签加载完毕-标签对应外部资源加载完毕');
});
// DOMContentLoaded
// 页面的标签 都加载完毕就触发了，不需要等待标签的内容回来
// video标签一生成， 事件就触发
// load事件等待 vide标签生成了，同时 video标签内的视频也加载回来 才触发
// video加载 分两部
// 只是加载标签而已 很快 DOMContentLoaded 快
// 会去加载 标签对应的视频 比较慢 load 慢
document.addEventListener("DOMContentLoaded",function () {
console.log("DOMContentLoaded 标签加载完毕就触发了");
})
</script>
</body>
</html>
10.页面加载事件的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-页面加载事件的作用.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<!-- 以前写js 习惯写在head标签中 -->
<!-- <script>
// 等待标签加载完毕了，才去获取dom元素
document.addEventListener('DOMContentLoaded', function () {
const h1 = document.querySelector('h1');
console.log(h1);
h1.innerText = '我们自己修改的';
});
// js先执行，但是 dom元素还没有开始加载
</script> -->
</head>
<body>
<h1>大标题</h1>
<!-- <img
src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
alt=""
/> -->
<!--
load 作用
我希望 在h1标签上输出一张图片的高度
-->
<script>
// window.addEventListener('load', function () {
// 等待图片完全加载了 内容也回来， 才触发
// const img = document.querySelector('img');
// 获取图片标签的宽度
// console.dir(img.height); // 0 因为 代码执行到这里的时候 图片的内容还没有回来
// document.querySelector("h1").innerHTML=img.height;
// });
// 现在建议把代码 写在 </body> 上面 ， 先等待dom标签加载，然后才去获取dom元素
</script>
</body>
</html>
2.元素大小和位置
1.scroll家族
1.使用场景：
我们想要页面滚动一段距离，比如100px，就让某些元素
显示隐藏，那我们怎么知道，页面滚动了100像素呢？
就可以使用scroll 来检测页面滚动的距离
2.获取宽高：
1.获取元素的内容总宽高（不包含滚动条）返回值不带单位
2.scrollWidth和scrollHeight
3.获取位置:
1.获取元素内容往左、往上滚出去看不到的距离
2.scrollLeft和scrollTop
3.这两个属性是可以修改的
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;
box-sizing: border-box;
}
.scrollDom {
width: 400px;
height: 400px;
background-color: pink;
/* 滚动条 */
overflow: scroll;
/* 让文字不要换 */
white-space: nowrap;
}
</style>
</head>
<body>
<h1></h1>
<h2></h2>
<div class="scrollDom">
<p>潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧潮吧</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>47</p>
<p>48</p>
<p>49</p>
<p>50</p>
<p>51</p>
<p>52</p>
<p>53</p>
<p>54</p>
<p>55</p>
<p>56</p>
<p>57</p>
<p>58</p>
<p>59</p>
<p>60</p>
<p>61</p>
<p>62</p>
<p>63</p>
<p>64</p>
<p>65</p>
<p>66</p>
<p>67</p>
<p>68</p>
<p>69</p>
<p>70</p>
<p>71</p>
<p>72</p>
<p>73</p>
<p>74</p>
<p>75</p>
<p>76</p>
<p>77</p>
<p>78</p>
<p>79</p>
<p>80</p>
<p>81</p>
<p>82</p>
<p>83</p>
<p>84</p>
<p>85</p>
<p>86</p>
<p>87</p>
<p>88</p>
<p>89</p>
<p>90</p>
<p>91</p>
<p>92</p>
<p>93</p>
<p>94</p>
<p>95</p>
<p>96</p>
<p>97</p>
<p>98</p>
<p>99</p>
</div>
<script>
/*
scrollWidth 不包含 滚动条 大小
scrollWidth 等于容器可以滚动的大小
*/
const scrollDom = document.querySelector('.scrollDom')
//输出他的宽高
console.log(scrollDom.scrollWidth);
console.log(scrollDom.scrollHeight);
// 获取当前容器滚动了的距离
scrollDom.addEventListener('scroll', function () {
// console.log(this.scrollTop);// 获取当前容器的滚动距离
console.log(scrollDom.scrollLeft); // 获取当前容器的滚动距离
console.log(scrollDom.scrollTop); // 获取当前容器的滚动距离
});
/*
1.页面滚动 使用 window.addEventListener('scroll') 事件
2.页面的滚动距离 document.documentElement.scrollTOP
1.元素滚动 dom.addEventListener('scroll')
2.获取元素滚动的距离
dom.scrollTop
dom.scrollLeft
3.scrollWidth 整个可以滚动的区域的宽度
4.scrollHeight 整个可以滚动的区域的高度
小细节 pc端 的滚动条大小 17px
移动端的滚动条 不占大小
*/
</script>
</body>
</html>
2.offset家族
1.使用场景
前面案例滚动多少距离，都是我们自己算的，最好是页面 滚动到某个元素，就可以做某些事。 简单说，就是通过js的方式，得到元素在页面中的位置 这样我们可以做，页面滚动到这个位置，就可以返回 顶部的小盒子显示…
2.获取宽高：
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
3.获取位置：
1.获取元素距离自己定位父级元素的左、上距离
2.offsetLeft和offsetTop 注意是只读属性
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;
box-sizing: border-box;
}
.offset {
width: 400px;
height: 400px;
background-color: pink;
overflow: scroll;
}
</style>
</head>
<body>
<div class="offset"></div>
<script>
const offsetDom = document.querySelector('.offset')
//获取宽度高度 包含滚动条的大小
console.log(offsetDom.offsetWidth);
console.log(offsetDom.offsetHeight);
//获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素 ,就相对于页面来计算)
console.log(offsetDom.offsetLeft);
console.log(offsetDom.offsetTop);
/*
总结 offset家族
1 offsetWidth 获取元素的宽度 包含这滚动条
2 offsetHeight 获取元素的高度 包含这滚动条
3 offsetLeft 获取定位了的父元素的 水平距离 左
4 offsetTop 获取定位了的父元素的 垂直距离 上
*/
</script>
</body>
</html>
3.client家族
1.获取宽高：
1.获取元素的可见部分宽高（不包含边框，滚动条等）
2.clientWidth和clientHeight
2.获取位置：
1.获取左边框和上边框宽度
2.clientLeft和clientTop 注意是只读属性
3.会在窗口尺寸改变的时候触发事件：
1.resize : 屏幕大小改变事件
window.addEventListener('resize' , functinon(){
//执行的代码
}
- 检测屏幕宽度：
window.addEventListener('resize' , functinon(){
let w = document.documentElement.clientWidth
console.log(w)
})
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;
box-sizing: border-box;
}
.client {
width: 400px;
height: 400px;
background-color: pink;
overflow: scroll;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="client">
<p>潮吧1</p>
<p>潮吧2</p>
<p>潮吧3</p>
<p>潮吧4</p>
<p>潮吧5</p>
<p>潮吧6</p>
<p>潮吧7</p>
<p>潮吧8</p>
<p>潮吧9</p>
<p>潮吧10</p>
<p>潮吧11</p>
<p>潮吧12</p>
<p>潮吧13</p>
<p>潮吧14</p>
<p>潮吧15</p>
<p>潮吧16</p>
<p>潮吧17</p>
<p>潮吧18</p>
<p>潮吧19</p>
<p>潮吧20</p>
<p>潮吧21</p>
<p>潮吧22</p>
<p>潮吧23</p>
<p>潮吧24</p>
<p>潮吧25</p>
<p>潮吧26</p>
<p>潮吧27</p>
<p>潮吧28</p>
<p>潮吧29</p>
<p>潮吧30</p>
<p>潮吧31</p>
<p>潮吧32</p>
<p>潮吧33</p>
<p>潮吧34</p>
<p>潮吧35</p>
<p>潮吧36</p>
<p>潮吧37</p>
<p>潮吧38</p>
<p>潮吧39</p>
<p>潮吧40</p>
<p>潮吧41</p>
<p>潮吧42</p>
<p>潮吧43</p>
<p>潮吧44</p>
<p>潮吧45</p>
<p>潮吧46</p>
<p>潮吧47</p>
<p>潮吧48</p>
<p>潮吧49</p>
<p>潮吧50</p>
<p>潮吧51</p>
<p>潮吧52</p>
<p>潮吧53</p>
<p>潮吧54</p>
<p>潮吧55</p>
<p>潮吧56</p>
<p>潮吧57</p>
<p>潮吧58</p>
<p>潮吧59</p>
<p>潮吧60</p>
<p>潮吧61</p>
<p>潮吧62</p>
<p>潮吧63</p>
<p>潮吧64</p>
<p>潮吧65</p>
<p>潮吧66</p>
<p>潮吧67</p>
<p>潮吧68</p>
<p>潮吧69</p>
<p>潮吧70</p>
<p>潮吧71</p>
<p>潮吧72</p>
<p>潮吧73</p>
<p>潮吧74</p>
<p>潮吧75</p>
<p>潮吧76</p>
<p>潮吧77</p>
<p>潮吧78</p>
<p>潮吧79</p>
<p>潮吧80</p>
<p>潮吧81</p>
<p>潮吧82</p>
<p>潮吧83</p>
<p>潮吧84</p>
<p>潮吧85</p>
<p>潮吧86</p>
<p>潮吧87</p>
<p>潮吧88</p>
<p>潮吧89</p>
<p>潮吧90</p>
<p>潮吧91</p>
<p>潮吧92</p>
<p>潮吧93</p>
<p>潮吧94</p>
<p>潮吧95</p>
<p>潮吧96</p>
<p>潮吧97</p>
<p>潮吧98</p>
<p>潮吧99</p>
<p>潮吧100</p>
</div>
<script>
const clientDom = document.querySelector('.client');
// 宽度和高度
console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）
// 获取边框的大小
console.log(clientDom.clientLeft); // 左边框
console.log(clientDom.clientRight); // 有没有？
console.log(clientDom.clientTop); // 上边框
// scollWidth 获取容器的宽度（包含滚动的区域）
// offsetWidth 获取可视区域的宽度（包含滚动条）
// clientWidth 获取可视区域的宽度（不包含滚动条）
// scrollLeft 获取左侧滚动的距离
// offsetLeft 获取和已经定位了的父级元素的左距离
// clientLeft 获取左边框的大小
</script>
</body>
</html>
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;
box-sizing: border-box;
}
div {
width: 400px;
height: 400px;
background-color: pink;
overflow: scroll;
border: 1px solid #000;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p> <p>666666666666666666666666666666666666666666666666666666666666666666666666666666666666</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
</div>
<script>
//pc端 的滚动条大小 17px
//移动端的滚动条 不占大小
const div =document.querySelector('div')
/* //1. scroll 家族
//输出div的宽高 不包含滚动条的大小 17px
//scroll 获取的宽高 会被获取对象的内容撑开而变化
console.log(div.scrollWidth);
console.log(div.scrollHeight);
div.addEventListener('scroll', function () {
// console.log(this.scrollTop);// 获取当前容器的滚动距离
console.log(div.scrollLeft); // 获取当前容器水平滚动距离 左右
console.log(div.scrollTop); // 获取当前容器垂直滚动距离 上下
});
*/
/* //2. offset 家族
//获取宽度高度 包含滚动条的大小
//offset 获取的宽高 不会被获取对象内容撑开而变化
console.log(div.offsetWidth);
console.log(div.offsetHeight);
//获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素 ,就相对于页面来计算)
//与子绝父相定位的方法 一样
console.log(div.offsetLeft);//取定位了的父元素的 水平距离 左
console.log(div.offsetTop);//获取定位了的父元素的 垂直距离 上 */
// 3. client 家族
//获取宽度高度 不包含滚动条大小 不包含边框大小
console.log(div.clientWidth); // 不包含 滚动条（类似 scrollWidth）
console.log(div.clientHeight); // 不包含 滚动条（类似 scrollHeight）
// 获取边框的大小 只能获取上左边框 无法获取下右边框
console.log(div.clientLeft); // 左边框
console.log(div.clientTop); // 上边框
console.log(div.clientRight); // undefined
console.log(div.clientBottom); // undefined
</script>
</body>
</html>
3.综合案列
1.固定导航栏
<!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;
box-sizing: border-box;
}
header {
height: 200px;
background-color: pink;
}
.nav {
height: 200px;
background-color: red;
}
.box {
background-color: green;
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<header></header>
<div class="nav"></div>
<div class="box">
<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>
<script>
/*
需求： 当页面滚动到一定的高度 nav变成了固定定位
1 一定高度 ？？？ 其实就是header标签的高 250px
步骤：
1 需要在页面滚动距离 大于或者等于 250 的高时候
1 设置nav标签做一个 固定定位
2 否则就取消固定定位
3 小bug 因为 nav标签做固定定位，不再拥有高度，自然把下面的标签给挡住！！！
解决它
给nav上面的标签 header标签 添加下外边距，大小 等于 nav的高
*/
const nav =document.querySelector('.nav')
const header = document.querySelector('header')
window.addEventListener('scroll', function () {
//获取页面滚动高度
const scrollTop = document.documentElement.scrollTop
//判断页面滚动高度
//200=header 的高度
if (scrollTop >= 200) {
nav.classList.add('fixed')
header.style.marginBottom = 200+'px'
}else{
nav.classList.remove('fixed')
header.style.marginBottom = 0
}
})
</script>
</body>
</html>
2.主动设置滚动距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-固定导航-案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 250px;
background-color: yellow;
}
nav {
background-color: orange;
height: 150px;
/* 粘性定位 兼容性问题 慎用！ */
position: sticky;
left: 0;
top: 0;
width: 100%;
}
div {
/* height: 150vh; */
background-color: aqua;
}
</style>
</head>
<body>
<button>设置页面滚动距离 200</button>
<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>
<script>
const button = document.querySelector('button');
button.addEventListener('click', function () {
// 设置页面的滚动距离
document.documentElement.scrollTop = 200;
});
</script>
</body>
</html>
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;
box-sizing: border-box;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
right: 100px;
bottom: 100px;
transition: all 3s;
}
body {
width: 100vw;
height: 10000px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div')
window.addEventListener('scroll' , function () {
let num = document.documentElement.scrollTop
if (num>500) {
div.style.display= 'block'
}else{
div.style.display= 'none'
}
})
div.addEventListener('click',function () {
let timeId = setInterval(function () {
document.documentElement.scrollTop -= 100
if (document.documentElement.scrollTop ===0) {
clearInterval(timeId);
}
},10)
})
//transition
</script>
</body>
</html>
4.轮播图
<!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 .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>
let indicator = document.querySelectorAll('.indicator li')
let slides = document.querySelectorAll('.slides li')
let h3 = document.querySelector('h3')
let prev = document.querySelector('.prev')
let next = document.querySelector('.next')
console.log(indicator);
console.log(slides);
//点击小图切换文字 切换大图
for (let index = 0; index < indicator.length; index++) {
indicator[index].addEventListener('click' , function () {
document.querySelector('.indicator .active').classList.remove('active')
indicator[index].classList.add('active')
h3.innerHTML = `第${index + 1}张图片的描述信息`
document.querySelector('.slides .active').classList.remove('active')
slides[index].classList.add('active')
})
}
//添加一个函数用来装图片
function sum() {
document.querySelector('.indicator .active').classList.remove('active')
indicator[index].classList.add('active')
h3.innerHTML = `第${index + 1}张图的描述信息`
document.querySelector('.slides .active').classList.remove('active')
slides[index].classList.add('active')
}
//点击左右箭头
let index = 0
next.addEventListener('click' , function () {
index++
if ( index > indicator.length-1) {
index = 0
}
sum()
})
prev.addEventListener('click' , function () {
index--
if (index < 0) {
index = indicator.length - 1
}
sum()
})
//计时器
let main = document.querySelector('.main')
let time = setInterval(function () {
next.click()
},1000)
//鼠标经过暂停定时器
main.addEventListener('mouseenter' , function () {
clearInterval(time)
})
//鼠标离开时开启定时器
main.addEventListener('mouseleave' , function () {
time = setInterval(function () {
next.click()
},1000)
})
</script>
</body>
</html>
