JS动画的三大家族offset/scroll/client
我们知道，JS动画的三大家族包括：offset/scroll/client。
本文对三大家族以及与其相关的匀速动画讲解
offset 家族的组成
offset的中文是：偏移，补偿，位移。
js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：
- offsetWidth
- offsetHight
- offsetLeft
- offsetTop
- offsetParent
下面分别介绍。
1、offsetWidth 和 offsetHight
offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：
- offsetWidth = width + padding + border
- offsetHeight = Height + padding + border
这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
举例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #000;
margin: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var div1 = document.getElementsByTagName("div")[0];
console.log(div1.offsetHeight); //打印结果：140（100+20+20）
console.log(typeof div1.offsetHeight); //打印结果：number
</script>
</body>
</html>
2、offsetParent
offsetParent：获取当前元素的定位父元素。
- 如果当前元素的父元素，有CSS定位（position为absolute、relative、fixed），那么
offsetParent获取的是最近的那个父元素。 - 如果当前元素的父元素，没有CSS定位（position为absolute、relative、fixed），那么
offsetParent获取的是body。
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1" style="position: absolute;">
<div class="box2" style="position: fixed;">
<div class="box3"></div>
</div>
</div>
<script>
var box3 = document.getElementsByClassName("box3")[0];
console.log(box3.offsetParent);
</script>
</body>
</html>
打印结果：
3、offsetLeft 和 offsetTop
offsetLeft：当前元素相对于其定位父元素的水平偏移量。
offsetTop：当前元素相对于其定位父元素的垂直偏移量。
备注：从父亲的 padding 开始算起，父亲的 border 不算在内。
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
width: 300px;
height: 300px;
padding: 100px;
margin: 100px;
position: relative;
border: 100px solid #000;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
/*position: absolute;*/
/*left: 10px;*/
/*top: 10px;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2" style="left: 10px"></div>
</div>
<script>
var box2 = document.getElementsByClassName("box2")[0];
//offsetTop和offsetLeft
console.log(box2.offsetLeft); //100
console.log(box2.style.left); //10px
</script>
</body>
</html>
在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，下面会讲。
offsetLeft 和 style.left 区别
（1）最大区别在于：
offsetLeft 可以返回无定位父元素的偏移量。如果父元素中都没有定位，则body为准。
style.left 只能获取行内样式，如果父元素中都没有设置定位，则返回""（意思是，返回空字符串）;
（2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。
比如：
div.offsetLeft = 100;
div.style.left = "100px";
（3）offsetLeft 和 offsetTop 只读，而 style.left 和 style.top 可读写（只读是获取值，可写是修改值）
总结：我们一般的做法是：用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值（比较方便）。理由如下：
- style.left：只能获取行内式，获取的值可能为空，容易出现NaN。
- offsetLeft：获取值特别方便，而且是现成的number，方便计算。它是只读的，不能赋值。
动画的种类
- 闪现（基本不用）
- 匀速（本文重点）
- 缓动（后续重点）
简单举例如下：（每间隔500ms，向右移动盒子100px）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>动画</button>
<div class="box" style="left: 0px"></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
//1、闪动
// btn.onclick = function () {
// div.style.left = "500px";
// }
//2、匀速运动
btn.onclick = function () {
//定时器，每隔一定的时间向右走一些
setInterval(function () {
console.log(parseInt(div.style.left));
//动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
//用style.left赋值，用offsetLeft获取值。
div.style.left = div.offsetLeft + 100 + "px";
//div.style.left = parseInt(div.style.left)+10+"px"; //NaN不能用
}, 500);
}
</script>
</body>
</html>
效果如下：
匀速动画的封装：每间隔30ms，移动盒子10px【重要】
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
margin: 0;
padding: 5px;
height: 300px;
background-color: #ddd;
position: relative;
}
button {
margin: 5px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 195px;
top: 40px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top: 150px;
}
</style>
</head>
<body>
<div class="box1">
<button>运动到 left = 200px</button>
<button>运动到 left = 400px</button>
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
var btnArr = document.getElementsByTagName("button");
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
//绑定事件
btnArr[0].onclick = function () {
//如果有一天我们要传递另外一个盒子，那么我们的方法就不好用了
//所以我们要增加第二个参数，被移动的盒子本身。
animate(box2, 200);
animate(box3, 200);
}
btnArr[1].onclick = function () {
animate(box2, 400);
animate(box3, 400);
}
//【重要】方法的封装：每间隔30ms，将盒子向右移动10px
function animate(ele, target) {
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
//我们可以把定时器本身，当成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target > ele.offsetLeft ? 10 : -10; //speed指的是步长
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
//因为步长有正有负，所有转换成绝对值来比较
if (Math.abs(val) < Math.abs(speed)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 30)
}
</script>
</body>
</html>
实现的效果：
上方代码中的方法封装，可以作为一个模板步骤，要记住。其实，这个封装的方法，写成下面这样，会更严谨，更容易理解：（将if语句进行了改进）
//【重要】方法的封装：每间隔30ms，将盒子向右移动10px
function animate(ele, target) {
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
//我们可以把定时器本身，当成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target > ele.offsetLeft ? 10 : -10; //speed指的是步长
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
//移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
//因为步长有正有负，所有转换成绝对值来比较
if (Math.abs(val) < Math.abs(speed)) { //如果val小于步长，则直接到达目的地；否则，每次移动一个步长
ele.style.left = target + "px";
clearInterval(ele.timer);
} else {
ele.style.left = ele.offsetLeft + speed + "px";
}
}, 30)
}
scroll 相关属性
window.onscroll() 方法
当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）
如果你需要做滚动监听，可以使用这个方法。
我们来看看和 scroll 相关的有哪些属性。
1、ScrollWidth 和 scrollHeight
ScrollWidth 和 scrollHeight：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。
注意：
scrollHeight 的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；如果不超出，scrollHeight为盒子本身的高度。ScrollWidth同理。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
margin: 3px;
border: 8px solid red;
}
</style>
</head>
<body>
<div class="box">
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
</div>
<script>
var div = document.getElementsByTagName("div")[0];
// `scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。
//IE8以下（不包括IE8），为盒子本身内容的高度。
console.log(div.scrollWidth);
console.log(div.scrollHeight);
</script>
</body>
</html>
打印结果：
2、scrollTop 和 scrollLeft
-
scrollLeft：获取水平滚动条滚动的距离。 -
scrollTop：获取垂直滚动条滚动的距离。
实战经验：
当某个元素满足scrollHeight - scrollTop == clientHeight时，说明垂直滚动条滚动到底了。
当某个元素满足scrollWidth - scrollLeft == clientWidth时，说明水平滚动条滚动到底了。
这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。
scrollTop 的兼容性
如果要获取页面滚动的距离，scrollTop 这个属性的写法要注意兼容性，如下。
（1）如果文档没有 DTD 声明，写法为：
document.body.scrollTop
在没有 DTD 声明的情况下，要求是这种写法，chrome浏览器才能认出来。
（2）如果文档有 DTD 声明，写法为：
document.documentElement.scrollTop
在有 DTD 声明的情况下，要求是这种写法，IE6、7、8才能认出来。
综合上面这两个，就诞生了一种兼容性的写法：
document.body.scrollTop || document.documentElement.scrollTop //方式一
document.body.scrollTop + document.documentElement.scrollTop //方式二
另外还有一种兼容性的写法：window.pageYOffset 和 window.pageXOffset。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。
综合上面的几种写法，为了兼容，不管有没有DTD，最终版的兼容性写法：
window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
判断是否已经 DTD 声明
方法如下：
document.compatMode === "CSS1Compat" // 已声明
document.compatMode === "BackCompat" // 未声明
将 scrollTop 和 scrollLeft 进行封装
这里，我们将 scrollTop 和 scrollLeft 封装为一个方法，名叫scroll()，返回值为 一个对象。以后就直接调用scroll().top 和 scroll().left就好。
代码实现：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 6000px;
width: 5000px;
}
</style>
</head>
<body>
<script>
//需求：封装一个兼容的scroll().返回的是对象，用scroll().top获取scrollTop，用scroll().left获取scrollLeft
window.onscroll = function () {
// var myScroll = scroll();
// myScroll.top;
console.log(scroll().top);
console.log(scroll().left);
}
//函数封装（简单封装，实际工作使用）
function scroll() {
return { //此函数的返回值是对象
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
</script>
</body>
</html>
上方代码中，函数定义的那部分就是要封装的代码。
另外还有一种比较麻烦的封装方式：（仅供参考）
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
获取 html 文档的方法
获取title、body、head、html标签的方法如下：
-
document.title文档标题； -
document.head文档的头标签 -
document.body文档的body标签； -
document.documentElement（这个很重要）。
document.documentElement表示文档的html标签。也就是说，基本结构当中的 html 标签而是通过document.documentElement访问的，并不是通过 document.html 去访问的。
scrollTop 举例：固定导航栏
完整版代码实现：
（1）index.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
#Q-nav1 {
overflow: hidden;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<!--引入工具js-->
<script src="tools.js"></script>
<script>
window.onload = function () {
//需求1：当我们滚动界面的时候，被卷曲的头部如果超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
//需求2：当我们滚动界面的时候，被卷曲的头部如果小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
//1.老三步。
var topDiv = document.getElementById("top");
var height = topDiv.offsetHeight;
var middle = document.getElementById("Q-nav1");
var main = document.getElementById("main");
window.onscroll = function () {
//2.判断 ，被卷曲的头部的大小
if (scroll().top > height) {
//3.满足条件添加类，否则删除类
middle.className += " fixed";
//第二个盒子也要占位置，为了避免重叠，我们给第三个盒子一个上padding的空间，把这个空间留给第二个盒子
main.style.paddingTop = middle.offsetHeight + "px";
} else {
middle.className = "";
//清零
main.style.paddingTop = 0;
}
}
}
</script>
</head>
<body>
<div class="top" id="top">
<img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
<img src="images/main.png" alt=""/>
</div>
</body>
</html>
上方代码中，有一个技巧：
main.style.paddingTop = middle.offsetHeight + "px";
仔细看注释就好。
（2）tools.js：
/**
* Created by smyhvae on 2018/02/03.
*/
function scroll() { // 开始封装自己的scrollTop
if (window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
实现效果：
image
缓动动画
三个函数
缓慢动画里，我们要用到三个函数，这里先列出来：
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round(); 四舍五入
缓动动画的原理
缓动动画的原理就是：在移动的过程中，步长越来越小。
设置步长为：目标位置和盒子当前位置的十分之一。用公式表达，即：
盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；
代码举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>运动到left = 400px</button>
<div></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
btn.onclick = function () {
setInterval(function () {
//动画原理：盒子未来的位置 = 盒子当前的位置+步长
div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";
}, 30);
}
</script>
</body>
</html>
效果：
image
缓慢动画的封装（解决四舍五入的问题）
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
image
原因是：JS在取整的运算时，进行了四舍五入。
我们把打印396.04px这个left值打印出来看看：
image
我么发现，通过div.style.left获取的值是精确的，通过div.offsetLeft获取的left值会进行四舍五入。
此时，我们就要用到取整的函数了。
通过对缓动动画进行封装，完整版的代码实现如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div></div>
<script>
var btn = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btn[0].onclick = function () {
animate(div, 200);
}
btn[1].onclick = function () {
animate(div, 400);
}
//缓动动画封装
function animate(ele, target) {
//要用定时器，先清定时器
//一个萝卜一个坑儿，一个元素对应一个定时器
clearInterval(ele.timer);
//定义定时器
ele.timer = setInterval(function () {
//获取步长
//步长应该是越来越小的，缓动的算法。
var step = (target - ele.offsetLeft) / 10;
//对步长进行二次加工(大于0向上取整,小于0向下取整)
//达到的效果是：最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置。
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//动画原理： 目标位置 = 当前位置 + 步长
ele.style.left = ele.offsetLeft + step + "px";
console.log(step);
//检测缓动动画有没有停止
console.log("smyhvae");
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
//处理小数赋值
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 30);
}
</script>
</body>
</html>
实现效果：
image
client 家族的组成
clientWidth 和 clientHeight
元素调用时：
- clientWidth：获取元素的可见宽度（width + padding）。
- clientHeight：获取元素的可见高度（height + padding）。
body/html 调用时：
- clientWidth：获取网页可视区域宽度。
- clientHeight：获取网页可视区域高度。
声明：
-
clientWidth和clientHeight属性是只读的，不可修改。 -
clientWidth和clientHeight的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。
clientX 和 clientY
event调用：
- clientX：鼠标距离可视区域左侧距离。
- clientY：鼠标距离可视区域上侧距离。
clientTop 和 clientLeft
- clientTop：盒子的上border。
- clientLeft：盒子的左border。
三大家族 offset/scroll/client 的区别
区别1：宽高
- offsetWidth = width + padding + border
- offsetHeight = height + padding + border
- scrollWidth = 内容宽度（不包含border）
- scrollHeight = 内容高度（不包含border）
- clientWidth = width + padding
- clientHeight = height + padding
区别2：上左
offsetTop/offsetLeft：
- 调用者：任意元素。(盒子为主)
- 作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft：
- 调用者：document.body.scrollTop（window调用）(盒子也可以调用，但必须有滚动条)
- 作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX：
- 调用者：event
- 作用：鼠标距离浏览器可视区域的距离（左、上）。
函数封装：获取浏览器的宽高（可视区域）
函数封装如下：
//函数封装：获取屏幕可视区域的宽高
function client() {
if (window.innerHeight !== undefined) {
//ie9及其以上的版本的写法
return {
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
//标准模式的写法（有DTD时）
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
} else {
//没有DTD时的写法
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
案例：根据浏览器的可视宽度，给定不同的背景的色。
PS：这个可以用来做响应式。
代码如下：（需要用到上面的封装好的方法）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="tools.js"></script>
<script>
//需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。
// // >960红色，大于640小于960蓝色，小于640绿色。
window.onresize = fn; //页面大小发生变化时，执行该函数。
//页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色
fn();
//封装成函数，然后指定的时候去调用和绑定函数名
function fn() {
if (client().width > 960) {
document.body.style.backgroundColor = "red";
} else if (client().width > 640) {
document.body.style.backgroundColor = "blue";
} else {
document.body.style.backgroundColor = "green";
}
}
</script>
</body>
</html>
上当代码中，window.onresize事件指的是：在窗口或框架被调整大小时发生。各个事件的解释如下：
- window.onscroll 屏幕滑动
- window.onresize 浏览器大小变化
- window.onload 页面加载完毕
- div.onmousemove 鼠标在盒子上移动（注意：不是盒子移动）
获取显示器的分辨率
比如，我的电脑的显示器分辨率是：1920*1080。
获取显示器的分辨率：
window.onresize = function () {
document.title = window.screen.width + " " + window.screen.height;
}
显示效果：
image
上图中，不管我如何改变浏览器的窗口大小，title栏显示的值永远都是我的显示器分辨率：1920*1080。
