webAPI系列之_5分钟玩转BOM_02篇
知识导航：
- offset系列
- client系列
- scroll系列
4 offset系列
4.1 概述
offset 译为偏移量，在这里我们使用 offset系列相关属性可以动态的得到元素的位置（偏移）、大小等。
常见属性：
值得注意的是：它获取的数值是不带单位的
4.2 offset与style属性的区别
style
- style 只能得到行内样式表中的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含padding和border 的值
- style.width 是可读写属性，可以获取也可以赋值
offset
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含padding+border+width
- offsetWidth 等属性是只读属性，只能获取不能赋值
故一般获取元素的大小偏移量可以用offset，设置则用style
4.3 栗子
4.3.1 拖拽模态框
效果：
相关思路：
这个小案例的思想是主要想清楚要移动盒子的top和left值。首先经过发现可以看出首先鼠标和盒子的相对位置是不变的
看图：
相关代码：
<!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;
}
input {
outline: none;
}
a {
text-decoration: none;
}
.con {
padding-left: 500px;
}
.out {
display: none;
position: fixed;
width: 100%;
height: 1000px;
background-color: dimgrey;
top: 0;
left: 0;
}
.inside {
position: absolute;
width: 500px;
height: 300px;
background-color: beige;
left: 50%;
transform: translateX(-50%);
top: 200px;
}
.inside .close {
position: absolute;
display: inline-block;
padding-top: 3px;
width: 28px;
height: 20px;
border: 3px solid #bbb;
border-radius: 50%;
color: white;
font-size: 12px;
text-align: center;
top: -20px;
right: -15px;
}
.inside .top01 {
width: 500px;
height: 40px;
border-bottom: 1px solid #999;
}
.inside .top01:hover {
cursor: move;
}
.inside .buttom {
text-align: center;
}
.inside .buttom div {
height: 30px;
margin: 40px;
}
.inside .buttom div input {
padding-left: 3px;
height: 30px;
width: 350px;
border: 1px solid #888;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="con">
<button>按钮</button>
</div>
<!-- 模态框模块 -->
<div class="out">
<div class="inside">
<a class="close" href="javascript:;">关闭</a>
<div class="top01" id="top"></div>
<div class="buttom">
<form action="">
<div>
<label for="name">姓名</label>
<input type="text" placeholder="请输入名字" name="name" id="">
</div>
<div>
<label for="password">密码</label>
<input type="password" placeholder="请输入密码" name="password" id="">
</div>
<div>
<input type="submit" value="提交">
</div>
</form>
</div>
</div>
</body>
<script>
var btn = document.querySelector("button");
var outDiv = document.getElementsByClassName("out")[0];
var inside = document.getElementsByClassName("inside")[0];
var close = document.getElementsByClassName("close")[0];
var top01 = document.getElementsByClassName("top01")[0];
btn.addEventListener("click", function(e) {
outDiv.style.display = "block";
})
close.addEventListener("click", function() {
outDiv.style.display = "none";
})
// 鼠标按下时获得坐标
top01.addEventListener("mousedown", function(e) {
var x = e.clientX - inside.offsetLeft;
var y = e.clientY - inside.offsetTop;
document.addEventListener("mousemove", move);
function move(e1) {
inside.style.left = e1.clientX - x + "px";
inside.style.top = e1.clientY - y + "px";
}
document.addEventListener("mouseup", function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</html>
5 client系列
5.1 概述
client 译为客户端，在这里我们可以使用 client 系列的相关属性来动态的获取元素可视区的相关信息。如该元素的边框大小、元素大小
常用属性：
6 scroll系列
6.1 概述
scroll 译为滚动，这里我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
常用属性：
看图：
6.2 栗子
用到的事件：页面滚动事件 scroll ，随着页面滚动会触发该事件
页面被卷去的头部：可以通过window.pageYOffset 获得,水平也即改成X
6.2.1 返回顶部
<!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;
}
.content {
height: 2000px;
background-color: aquamarine;
}
.goBack {
display: none;
text-decoration: none;
width: 50px;
height: 50px;
background-color: yellow;
font-size: 18px;
}
</style>
</head>
<body>
<div class="content"></div>
<a class="goBack" href="javascript:;">返回顶部</a>
<script>
// 开始时候隐藏
// 下滑到100px的时候出来并且固定住
// 一按返回顶部
var goBack = document.querySelector(".goBack");
document.addEventListener("scroll", function() {
if (window.pageYOffset >= 1000) {
goBack.style.display = "block";
goBack.style.position = "fixed";
goBack.style.right = "10px";
goBack.style.top = "600px"
} else {
goBack.style.display = "none";
}
});
goBack.addEventListener("click", function() {
window.scroll(0, 0)
});
</script>
</body>
</html>
