JS offset，client，scroll三大系列对比
红鸿运
元素偏移量offset
offset：
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获得元素大小位置，用offset更合适
它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准
style：
style 只能得到行内样式表中的样式值 style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border的值
style.width 是可读写属性，可以获得也可以赋值
所以我们想要给元素更改值，则需要用style
案例：获得鼠标在盒子内的坐标
我们在盒子内点击 想要得到鼠标距离盒子左右的距离
首先得到鼠标在页面中的距离（e.pageX,e.pageY）
其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）
用鼠标距离页面的坐标减去盒子在页面中的距离 得到鼠标在盒子内的坐标
如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove
<style>
*{
padding: 0px;
margin: 0px;
}
.father{
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px;
}
</style>
<div class="father"></div>
var father = document.querySelector('.father')
father.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是'+x+'y坐标是'+y;
})
元素可视区client
client 翻译过来就是客户端，我们使用client系列的相关来获取元素可视区的相关信息
通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding 内容区的宽度，不包含边框，返回的数值不带单位 |
| element.clientHeight | 返回自身包括padding 内容区的宽度，不包含边框，返回的数值不带单位 |
client 宽度 和我们offsetWidth最大的区别是不包含边框
元素滚动scroll
scroll 翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态得到该元素的大小，滚动距离等
| scroll系列 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不包含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的宽度，不包含边框，返回数值不带单位 |
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
overflow: auto;
}
</style>
<div>
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
var div = document.querySelector('div');
console.log(div.scrollHeight);
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll',function(){
console.log(div.scrollTop);
})
// 页面被卷去的头部：可以通过window.pageYOffset获得
// 如果是被卷去的左侧 window.pageXOffset
三大系列总结
| 三大系列大小对比 | 作用 |
|---|---|
| element.offsetWidth | 返回自身包括padding，边框，内容区的宽度，返回数值不带单位 |
| element.clientWidth | 返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
他们的主要用法：
1. offset系列经常用于获取元素位置 offseLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取滚动距离 scrollTop scrollLeft
页面的滚动距离通过 window.pageXOffset获得
动画原理
动画原理
1.获得盒子当前位置
2.让盒子在当前位置加上一个移动距离
3.让定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意此元素需要添加定位，才能使用element.style.left
<style>
div {
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
<div></div>
var div = document.querySelector('div');
var timer = setInterval(function(){
if(div.offsetLeft == 400){
// 停止动画 本质是停止定时器
clearInterval(timer)
}
div.style.left = div.offsetLeft + 1 + 'px';
},30)
案例：封装一个简单的动画函数
<style>
div {
position: absolute;
width: 50px;
height: 50px;
background-color: skyblue;
}
span {
position: absolute;
top: 100px;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
<div></div>
<span>我是span</span>
<button>点击我span才走</button>
// 简单动画函数封装 obj目标对象 target目标位置
// 给不同的元素指定了不同的定时器，利用对象里面的属性
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 5 + 'px';
}, 30)
}
// 调用函数
animate(div, 400);
// 当我们不断的点击按钮，这个元素会越来越快，因为开启了太多定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器
btn.addEventListener('click', function () {
animate(span, 300);
})
缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢降下来
2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
4.注意步长值需要取整
<style>
span {
position: absolute;
left: 0;
top: 50px;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
<button class="btn500">点我贝贝到500</button>
<button class="btn800">点我贝贝到800</button>
<span>贝贝奇</span>
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 我们把步长值改为整数 不要出现小数问题
//var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
if (callback) {
// 调用函数
callback();
}
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function () {
animate(span, 500);
})
btn800.addEventListener('click', function () {
animate(span, 800, function () {
// alert('你好吗？');
span.style.backgroundColor = 'skyblue';
});
})
// 匀速动画 就是盒子是当前的位置+固定的值
// 缓动动画就是 盒子当前的位置 + 变化的值（目标值-现在的位置）/10
// 动画函数添加回调函数
/*
回调函数原理：函数作为一个参数。将这个函数作为参数传到另一个函数里面
当那个函数执行之后，再执行传进去的这个函数，这个过程就叫做回调
*/
类似资料：