webAPI第五天网页特效
回顾昨日冒泡事件
- e.stopPropagation() //阻止冒泡
- removeEventListener() // 注销事件监听
- 委托：原理是用了冒泡，监听给父元素
手风琴案例
- 实现的效果，在一个大div内有几个小div，每个小DIV的大小一样，鼠标划过那个div，这个div就变大，其他几个div变小。鼠标离开变回原样
- 编程步骤：2.1 获取元素；2.2 循环绑定事件，配合css实现效果。
let lis = document.querySelectiorAll('li')
for ( let i = 0;i<lis.length;i++) {
//鼠标移入
lis[i].addEventListener('mouseenter',()=>[
for (let j = 0;j<lis.length;j++) {
lis[j].style.width = '100px'
}
this.style.width = '800px'
])
//鼠标离开
for(let j = 0;j<lis.length;j++){
lis[j].style.width='240px'
}
}
li {
transition: all 500ms;
}
滚动事件和加载事件--知识点
1. 滚动事件：
页面滚动的时候触发的事件，事件名scroll，一般把监听给window或document，也可以是其他元素
window.addEventListener('scroll',()={
})
let div = document.querySelector('div')
div.addEventListener('scroll',()={
})
2. 加载事件：
加载外部资源完毕时触发的事件，事件名：load
let img = document.querySelector('img')
img.addEventListener('load',()={
})
//或 window.addEventListener('load',()=>{})之类
2.1 特别加载事件：
DOMContentLoaded, DOM树加载完毕事件
document.addEventListener('DOMContentLoaded',()={})
元素大小和位置--知识点
1.scroll家族，可读写
获取元素内容总宽和高，返回不带单位
let div = document.querySelector('div')
div.scrollWidth //内容的宽度
div.scrollHeight // 内容的高度
1.1 获取位置：
元素往左和往下被卷去看不到的距离（重点）
window.scrollTop //被卷去的高度，也是页面往下走的高度
window.scrollLeft // 被卷去的左侧
window.addEventListener('scroll',()=>{
console.log(document.documentElement.scrollTop) //document.documentElement 就是html标签
})
let div = document.querySelector('div')
div.addElementlistener('click',()=>{
document.documentElement.scrollTop = 500 //可以给值，指定滚动到什么位置 ，重点！没有单位！
})
2.offset家族
得到宽高和获取位置
2.1 得到元素的宽和高
仅仅是盒子模型盒子的大小 （内容+padding+border）
let div = document.querySelector('div')
console.log(div.offsetWidth)// div的宽度
console.log(div.offsetHeight) // div的高度
2.2 获取位置
获取元素距离定位父级元素的左、上距离，父元素没定位，页面左上角，只读。
let div = document.querySelector('div')
console.log(div.offsetTop)// 高度距离 ，以左上角
console.log(div.offsetHeight) //左边距，以左上角
电梯导航案例
1681955566410.png
点击小导航，当前添加active ，其余移除activ，得到对应内容的offsetTOP值，滚动到相应位置
let items = document.querySelectorAll('.item')
let contents = document.querySelectorAll('content')
for (let i =0;i<items.length;i++) {
items[i].addEventListener('click',()=>{
document.querySelector('.aside .active').classList.remove('active')
this.classList.add('active')
document.documentElement.scrollTop = contents[i].offsetTop
})
}
3.client家族
3.1得到可视区域的大小
let div = document.querySelector('div')
console.log(div.clientWidth) //仅仅是可是区域，不包含滚动条，边框等，包含padding
console.log(div.clientHeight) //仅仅是可是区域，不包含滚动条，边框等，包含padding
window.addEventListener('resize',function() { //resize事件，窗口大小改变
console.log(document.documentElement.clientWidth)
})
3.2 得到可视区域边框的宽度
clientLeft，clientTop 得到就是盒模型border的上宽度与左宽度
综合案例轮播图
1681959336323.png
思路：①分析html与css结构②根据需求分解为几个javascript模块③写各个模块，测试模块
需求：
- 鼠标移入小图标，小图标高亮，下边绿色，其他图片遮罩，无边框高亮
- 当鼠标移入小图片，显示上面的大图片，上面的大图片有淡入淡出效果 opacity
- 自动更改图片描述信息
- 点击箭头按钮，播放上一张或下一张 index= index % lis.length
- 定时器自动播放
- 鼠标经过停止计时器，鼠标离开继续定时器 clearInterval(定时器id)
注意事项：多次复用的代码需要封装函数
<!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>QQ音乐轮播图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 700px;
margin: auto;
}
li {
list-style: none;
}
ul.indicator {
width: 700px;
height: 80px;
background-color: #000;
display: flex;
justify-content: space-evenly;
padding: 10px 0;
}
.indicator li {
display: block;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
}
.indicator li img {
width: 60px;
height: 60px;
}
.container {
position: relative;
}
.extra {
position: absolute;
bottom: 0;
width: 700px;
height: 53px;
background-color: rgba(0, 0, 0, 0.8);
}
.extra p {
font-size: 28px;
color: #98e404;
font-weight: 500;
display: inline-block;
padding-left: 20px;
line-height: 53px;
}
.extra a {
margin-top: 12px;
float: right;
line-height: 53px;
width: 30px;
height: 30px;
background-image: url(./assets/icon_focus_switch.png);
background-repeat: no-repeat;
}
.extra .prev {
background-position: 0 0;
margin-right: 10px;
}
.extra .next {
margin-right: 20px;
background-position: -60px 0;
}
.bigPicturArea {
height: 320px;
}
li .mask {
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
width: 60px;
height: 60px;
top: 0;
left: 0;
}
.bigPicturArea {
position: relative;
}
.bigPicturArea li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all .3s;
}
.bigPicturArea li.active {
opacity: 1;
}
li .mask.active {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<ul class="bigPicturArea">
<li class='active'><img src="./assets/b_01.jpg" alt="" class="bigPicture active"></li>
<li><img src="./assets/b_02.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_03.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_04.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_05.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_06.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_07.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_08.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_09.jpg" alt="" class="bigPicture"></li>
<li><img src="./assets/b_10.jpg" alt="" class="bigPicture"></li>
</ul>
<div class="extra">
<p class="descriptionOfGoods">这是第1张图片的说明</p>
<a class="next" href="#"></a>
<a class="prev" href="#"></a>
</div>
</div>
<div class="indicaterContainer">
<ul class="indicator">
<li><img src="./assets/s_01.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_02.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_03.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_04.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_05.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_06.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_07.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_08.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_09.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
<li><img src="./assets/s_10.jpg" alt="./assets/b_02.jpg"><span class="mask"></span>
<span class="border"></span>
</li>
</ul>
</div>
</div>
<script>
let lis = document.querySelectorAll('.indicator li')
let bigPictureLis = document.querySelectorAll('.bigPicturArea li')
let spans = document.querySelectorAll('.indicator .mask')
let descriptions = document.querySelector('p.descriptionOfGoods')
let main = document.querySelector('.wrapper')
//点击哪个导航图标就展示相应的图片
let index = 0
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function () {
for (let j = 0; j < lis.length; j++) {
bigPictureLis[j].classList.remove('active')
spans[j].classList.remove('active')
}
bigPictureLis[i].classList.add('active')
spans[i].classList.add('active')
descriptions.innerText = `这是第${i + 1}张图片描述`
index = i
})
}
//左右箭头动作
let prev = document.querySelector('.extra .prev')
let next = document.querySelector('.extra .next')
next.addEventListener('click', () => {
index++
index = index % lis.length
switchPicture()
})
prev.addEventListener('click', () => {
index--
if (index < 0) {
index = lis.length - 1
}
switchPicture()
})
let switchPicture = function () {
for (let j = 0; j < lis.length; j++) {
bigPictureLis[j].classList.remove('active')
spans[j].classList.remove('active')
}
bigPictureLis[index].classList.add('active')
spans[index].classList.add('active')
descriptions.innerText = `这是第${index + 1}张图片描述`
}
let timer = setInterval(() => {
next.click()
}, 1000);
main.addEventListener('mouseenter', function () {
clearInterval(timer)
})
main.addEventListener('mouseleave', function () {
timer = setInterval(function () {
// 自动调用右侧按钮的点击事件
next.click()
}, 1000)
})
</script>
</body>
</html>
