apis-day5网页特效篇
滚动事件和加载事件
学习目标:
1.能够制作常见的网页特效
2.具备制作常见网页焦点图的能力
目标:掌握新的事件,做更强交互
1.1滚动事件
当页面进行滚动时触发的事件
为什么要学?很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部
事件名:scroll
监听整个页面滚动:
//页面滚动事件
window.addEventListener('scoll',function(){
})
注:给windows或document添加scoll事件
监听某个元素的内部滚动直接给某个元素加即可
1.2加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
为什么要学?
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中,这时候直接找 dom 元素找不到
事件名:load
监听页面所有资源加载完毕
- 给window添加load事件
//页面加载事件
window.addEventLisener('load',functio(){
})
注:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表 、图像等完全加载
监听页面DOM加载完毕:给document添加DOMContentLoad事件
document.addEventListener('DOMContentLoaded',function(){
//执行的操作
})
元素大小和位置
2.1 scroll家族(可读可改)
使用场景:
想要页面滚动一段距离,比如100px,就让某些元素 显示隐藏——使用scroll 来检测页面滚动的距离~
获取宽高:
-
获取元素的内容总宽高(不包含滚动条)返回值不带单位
-
scrollWidth和scrollHeight
获取位置:
- 获取元素内容往左、往上滚出去看不到的距离
- scrollLeft和scrollTop
- 这两个属性是可以修改的 (赋值)
div.addEventListener('scoll',function(){
console.log(this.scrollTop)
})
开发中,我们经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素,或者固定一个元素
//页面滚动事件
window.addEventListener('scroll',function(){
//获取当前元素被卷去的头部
let num = document.documentElement.scrollTop
console.log(num)
})
注:document.documentElement HTML文档返回对象为HTML元素
案例:仿新浪返回顶部
实现需求:
当页面滚动500像素,就显示返回顶部按钮,否则隐藏, 同时点击按钮,则返回顶部
分析:
①:用到页面滚动事件
②:检测页面滚动大于等于100像素,则显示按钮
③:点击按钮,则让页面的scrollTop 重置为 0
<!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')
// 1.页面滚动事件
window.addEventListener('scroll', function () {
//2.检测滚动的距离
let num = document.documentElement.scrollTop
//3.进行判断显示和隐藏
if (num >= 500) {
backtop.style.display = 'block'
}
else {
backtop.style.display = 'none'
}
})
// 一、点击链接返回顶部backtop.children[1]
backtop.children[1].addEventListener('click', function () {
// 返回顶部
// scrollTop可读写
document.documentElement.scrollTop = 0
})
</script>
</body>
</html>
2.2 offset家族
使用场景:
通过js的方式,得到元素在页面中的位置 。这样我们可以做,页面滚动到这个位置,就可以返回顶部的小盒子显示…
获取宽高:
- 获取元素的自身宽高、包含元素自身设置的宽高(内容)、padding、border
- offsetWidth和offsetHeight
获取位置:
- 获取元素距离自己定位父级元素的左、上距离 (父级必须有定位,如果都没有,就以文档左上角为准)
- offsetLeft和offsetTop 注意是只读属性
案例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: 0;
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 header = document.querySelector('.header')
let sk = document.querySelector('.sk')
// 1.页面滚动事件
window.addEventListener('scroll',function(){
if(document.documentElement.scrollTop>=sk.offsetTop){
header.style.top='0'
}else{
header.style.top='-80px'
}
})
</script>
</body>
</html>
案例2:电梯导航案例
需求:点击可以页面调到指定效果
分析:
①:点击当前 小导航,当前添加active,其余移除active
②:得到对应 内容 的 offsetTop值
③:让页面的 scrollTop 走到 对应 内容 的 offsetTop
<!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>
// 1.获取元素
let items = document.querySelectorAll('.item')
let neirongs=document.querySelectorAll('.neirong')
//2.左侧asice模块,点击谁,谁高亮
for(let i = 0;i<items.length;i++){
items[i].addEventListener('click',function(){
// 找到上一个active 移除类
document.querySelector('.aside .active').classList.remove('active')
// 点击谁,谁添加类
this.classList.add('active')
// 3.页面滚动,左边点击谁,右边就滚动到哪个位置
document.documentElement.scrollTop=neirongs[i].offsetTop
})
}
</script>
</body>
</html>