这篇博客详细介绍了网页滚动事件和加载事件的使用，包括如何监听页面滚动和加载状态。同时，讲解了DOM中关于元素大小和位置的重要属性，如scroll、offset家族，并通过实际案例展示了它们在页面导航栏显示、内容切换等场景的应用。最后，提供了一个综合案例，演示了图片轮播的实现，涉及到鼠标悬停、点击事件以及定时器的运用。
DOM- 网页特效篇
1.滚动事件和加载事件
1.1.滚动事件
1.2.加载事件
小结
- 页面滚动事件如何添加？
scroll
监听整个页面滚动给 window 或 document 加- 加载事件有哪两个？如何添加？
load 事件:监听整个页面资源给 window 加
DOMContentLoaded:给 document 加,当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
2.元素大小和位置
2.1. scroll家族
小结
案例
源代码
<!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;
}
.content {
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
let backtop = document.querySelector('.backtop')
let a = document.querySelector('.backtop a')
let img = document.querySelector('.backtop img')
window.addEventListener('scroll', function() {
if(document.documentElement.scrollTop >= 500) {
backtop.style.display = 'block'
} else {
backtop.style.display = 'none'
}
})
a.addEventListener('click', function() {
document.documentElement.scrollTop = 0
})
img.addEventListener('click', function() {
backtop.style.display = 'none'
})
</script>
</body>
</html>
2.2 offset家族
小结
案例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;
}
.content {
overflow: hidden;
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
.header {
position: fixed;
top: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: purple;
text-align: center;
color: #fff;
line-height: 80px;
font-size: 30px;
transition: all .3s;
}
.sk {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 500px;
}
</style>
</head>
<body>
<div class="header">我是顶部导航栏</div>
<div class="content">
<div class="sk">秒杀模块</div>
</div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
let sk = document.querySelector('.sk')
let header = document.querySelector('.header')
window.addEventListener('scroll', function() {
if(document.documentElement.scrollTop >= sk.offsetTop) {
header.style.top = '0'
}else {
header.style.top = '-80px'
}
})
</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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.aside {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.item {
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 10px;
cursor: pointer;
}
.active {
background-color: red;
color: #fff;
}
.content {
width: 660px;
margin: 400px auto;
}
.neirong {
height: 300px;
margin-bottom: 20px;
color: #fff;
}
.content1 {
background-color: red;
}
.content2 {
background-color: blue;
}
.content3 {
background-color: orange;
}
.content4 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="aside">
<div class="item active">男装/女装</div>
<div class="item">儿童服装/游乐园</div>
<div class="item">电子产品</div>
<div class="item">电影/美食</div>
</div>
<div class="content">
<div class="neirong content1">男装/女装</div>
<div class="neirong content2">儿童服装/游乐园</div>
<div class="neirong content3">电子产品</div>
<div class="neirong content4">电影/美食</div>
</div>
<script>
let items = document.querySelectorAll('.item')
let neirongs = document.querySelectorAll('.neirong')
for(let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function() {
document.querySelector('.aside .active').classList.remove('active')
this.classList.add('active')
document.documentElement.scrollTop = neirongs[i].offsetTop
})
}
</script>
</body>
</html>
2.3 client家族
总结
3.综合案例
源代码(JS)
<script>
let indicator = document.querySelectorAll('.indicator li')
let slides = document.querySelectorAll('.slides li')
let extra = document.querySelector('.extra h3')
let next = document.querySelector('.next')
let prev = document.querySelector('.prev')
let main = document.querySelector('.main')
//1.鼠标经过图片，高亮，其余变暗
for(let i = 0; i < indicator.length; i++) {
indicator[i].addEventListener('mouseenter', function() {
document.querySelector('.indicator .active').classList.remove('active')
this.classList.add('active')
//2.大图片跟着变化
document.querySelector('.slides .active').classList.remove('active')
slides[i].classList.add('active')
extra.innerHTML = `第${i + 1}张图的描述信息`
//解决bug
index = i
})
}
//3.右键按钮播放
let index = 0
next.addEventListener('click', function() {
index++
index = index % slides.length
common()
})
prev.addEventListener('click', function() {
index--
if(index < 0) {
index = slides.length - 1
}
common()
})
//相同操作封装函数
function common() {
document.querySelector('.indicator .active').classList.remove('active')
indicator[index].classList.add('active')
//2.大图片跟着变化
document.querySelector('.slides .active').classList.remove('active')
slides[index].classList.add('active')
extra.innerHTML = `第${index + 1}张图的描述信息`
}
//开启定时器
let timer = setInterval(function() {
next.click()
}, 1000)
//鼠标经过停止计时器
main.addEventListener('mouseenter', function() {
clearInterval(timer)
})
//鼠标离开开启计时器
main.addEventListener('mouseleave', function() {
timer = setInterval(function() {
next.click()
}, 1000)
})
</script>
第五阶段over
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
