学习了DOM，BOM以后，我们现在开始学习网页端的一些常见特效。
一、元素偏移量 offset 系列
1.1 什么是offset
offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
注意：
1、获得元素距离带有定位父元素的位置
2、 获得元素自身的大小（宽度高度）
3、 返回的数值都不带单位
1.2 offset 常用属性
1、 element.offsetParent 返回有定位的父级元素，如果没有父级or没有有定位的父级则直接返回body
2、 element.offsetTop 返回距离有定位父级（如果没有父级or没有有定位的父级则直接返回body）的上方的距离
3、 element.offsetLeft 返回距离有定位父级（如果没有父级or没有有定位的父级则直接返回body）的左侧的距离
4、 element.offsetWidth 返回对象的宽度（内部宽度+padding+边框），不带单位！！！
5、 element.offsetHeight 返回对象的高度（内部高度+padding+边框），不带单位！！
1.3 offset 与 style 区别
offset：
1、offset 可以得到任意样式表中的样式值
2、offset 系列获得的数值是没有单位的
3、offsetWidth 包含padding+border+width
4、offsetWidth 等属性是只读属性，只能获取不能赋值
5、所以，我们想要获取元素大小位置，用offset更合适
style：
1、style 只能得到行内样式表中的样式值
2、style.width 获得的是带有单位的字符串
3、style.width 获得不包含padding和border 的值
4、style.width 是可读写属性，可以获取也可以赋值
5、所以，我们想要给元素更改值，则需要用style改变
总结：用offset获取元素对象的大小+‘px’；用style给元素对象进行赋值，修改操作；
1.4 offset的使用案例---获取鼠标在对象内部的位置
案例分析：
<body>
<div class="box"></div>
<script>
// 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
// console.log(e.pageX);
// console.log(e.pageY);
// console.log(box.offsetLeft);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
</script>
</body>1、获取盒子对象。2、利用mouseover鼠标经过事件触发。3、利用 盒子对象.offsetTop 和盒子对象.offsetLeft 可以得到盒子对象距离body的上左边距，然后再利用事件对象.pageX 和 事件对象.pageY 得到鼠标触发事件时在页面中的位置，两者做差就可以得到鼠标在盒子内部的位置。
1.5 offset的使用案例---弹出框（模态框 ）拖拽
案例要求：
1. 点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。 2. 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3. 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 4. 鼠标松开，可以停止拖动模态框移动。
案例分析：
1、获取弹出框的链接对象，关闭按钮对象，模态框最上方的对象、弹出框对象。2、点击链接对象，模态框，遮挡层display=‘block’。3、点击关闭按钮对象，模态框，遮挡层display=‘none’。4、鼠标按下mousedown获取鼠标在模态框最上方的对象的位置，并添加一个鼠标移动事件，计算模态框的位置。5、鼠标弹起mouseup后，清除鼠标移动事件。
<body>
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>二、元素可视区 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列 的相关属性可以动态的得到该元素的边框大小、元素大小等
2.1 client常用属性
1、element.clientTop 返回元素上边框的大小
2、element.clientLeft 返回元素左边框的大小
3、element.clientWidth 返回元素宽度（padding+宽度），不带单位
4、element.clientHeight 返回元素高度（padding+高度），不带单位
2.2 立即执行函数
使用方法如下（function（形参）{}）（实参）；直接完成调用
<body>
<script>
// 1.立即执行函数: 不需要调用，立马能够自己执行的函数
function fn() {
console.log(1);
}
fn();
// 2. 写法 也可以传递参数进来
// 1.(function() {})() 或者 2. (function(){}());
(function(a, b) {
console.log(a + b);
var num = 10;
})(1, 2); // 第二个小括号可以看做是调用函数
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部变量
}(2, 3));
// 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
</script>
</body>立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况 。
如果有多个立即执行函数，需要加在末尾+；。否则报错。
三、元素滚动 scroll 系列
3.1 scroll常用属性
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
1、element.scrollTop 返回滚动卷入上侧的距离，不带单位
2、element.scrollLeft 返回滚动卷入上左侧的距离，不带单位
3、element.scrollWidth 返回元素宽度（内容宽度），不带单位
4、element.scrollHeight 返回元素高度（padding+内容高度），不带单位
1. offset系列 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过 window.pageXOffset 获得
3.2 mouseenter 和mouseover的区别
mouseenter 鼠标事件：
1、 当鼠标移动到元素上时就会触发 mouseenter 事件
2、 类似 mouseover，它们两者之间的差别是：mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
3、之所以这样，就是因为mouseenter不会冒泡
4、跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
四、动画函数封装
4.1 动画原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：
1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left
<body>
<div></div>
<script>
// 动画原理
// 1. 获得盒子当前位置
// 2. 让盒子在当前位置加上1个移动距离
// 3. 利用定时器不断重复这个操作
// 4. 加一个结束定时器的条件
// 5. 注意此元素需要添加定位， 才能使用element.style.left
var div = document.querySelector('div');
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
// 停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30);
</script>
</body>4.2 动画函数封装
注意函数需要传递2个参数，动画对象和移动到的距离。
<body>
<div>11</div>
<span>22</span>
<script>
// 简单动画函数封装obj目标对象 target 目标位置
function animate(obj, target) {
var timer = setInterval(function () {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
// 调用函数
animate(div, 300);
animate(span, 200);
</script>
</body>4.3不同对象添加不同动画函数
如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自 己专门用自己的定时器）。
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性
<body>
<button>点击11才走</button>
<div></div>
<span>11</span>
<script>
// var obj = {};
// obj.name = 'andy';
// 简单动画函数封装obj目标对象 target 目标位置
// 给不同的元素指定了不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
// 调用函数
animate(div, 300);
btn.addEventListener('click', function() {
animate(span, 200);
})
</script>
</body>注意：
1、动画函数内部首先先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);
2、不使用var创建计时器，而是使用obj.timer给对象添加一个计时器属性。