DOM -网页特效篇
1.滚动事件和加载事件
1.滚动事件
1当页面进行滚动时触发的事件
2.事件名： scroll
3.监听整个页面滚动： 代码：
const div = document.querySelector ('div')
div.addEventListener ('scroll',function () {
console.log('div 又开始滚啦');
})
给 window 或 document 添加 scroll 事件
4.监听某个元素的内部滚动直接给某个元素加即可
2.加载事件
1.load加载事件
1.加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
2.事件名：load
3.监听页面所有的资源加载完毕：
window.addEventListener("load",function () {
console.log(window);
})
给 window添加 load事件
4.注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
2.DOMContentLoaded加载事件
1.当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
2.事件名:DOMContentLoaded
3.监听页面DOM加载完毕:
<script>
document.addEventListener("DOMContentLoaded",function () {
console.log(window);
})
</script>
给document 添加 DOMContentLoaded事件
3.滚动事件和加载事件总结
1页面滚动事件如何添加？
1.scroll
2.监听整个页面滚动给 window 或 document 加
2.加载事件有哪两个？如何添加？
1.load 事件
监听整个页面资源，给 window 加
2.DOMContentLoaded 给 document 加,当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
2.元素大小位置
1.scroll家族
<script>
/*
scrollWidth 不包含 滚动条 大小
scrollWidth 等于容器可以滚动的大小
*/
const scrollDom = document.querySelector('.scroll-dom');
// 输出它宽度高度
console.log(scrollDom.scrollWidth);
// console.log(scrollDom.scrollHeight);
// 获取当前容器滚动了的距离
scrollDom.addEventListener('scroll', function () {
// console.log(this.scrollTop);// 获取当前容器的滚动距离
console.log(this.scrollLeft); // 获取当前容器的滚动距离
});
/*
1 页面滚动 使用 window.addEventListener("scroll") 事件
2 页面的滚动距离 document.documentElement.scrollTop
1 元素滚动 dom.addEventListener("scroll")
2 获取元素滚动的距离
dom.scrollTop
dom.scrollLeft
3 scrollWidth 整个可以滚动的区间的宽度
4 scrollHeight 整个可以滚动的区域的高度
小细节 PC端的滚动条大小 17px
小细节 移动端的滚动条 不占大小
*/
</script>
2.offset家族
<body>
<div class="parent">
<h1>标签</h1>
<div class="offset"></div>
</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>
3.client家族
<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>
3.轮播图综合案例
分析：
需求①：小图标鼠标经过事件
鼠标经过小图片，当前高亮，其余兄弟变淡 添加类
需求② ：大图片跟随变化
对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入 淡出的效果，还是添加类
需求③：右侧按钮播放效果
点击右侧按钮，可以自动播放下一张图片 需要一个变化量 index 不断自增 然后播放下一张图片 如果到了最后一张，必须要还原为第1张图片 教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
1.html样式
<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>
</body>
2.css样式
<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>
3.js样式
<script>
// 获取小图片的li标签
const lis = document.querySelectorAll('.indicator li');
// 获取大图对应的li标签
const slidesLis = document.querySelectorAll('.slides li');
// 遍历来绑定点击事件
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click', function (event) {
// 把大图的 active 类 移除掉
document
.querySelector('.slides li.active')
.classList.remove('active');
// // 把小图的 active 移除掉
document
.querySelector('.indicator li.active')
.classList.remove('active');
// 给当前点击的li标签对应下标的 小图 添加 active类
this.classList.add('active');
// console.log(this);// 希望 this是li标签
// 给当前点击的li标签对应下标的 大图 添加 active类
slidesLis[index].classList.add('active');
// 设置标题文字
document.querySelector('h3').innerText = `第${
index + 1
}张图的描述信息`;
});
}
</script>
