学习目标：
? ? ? ? 1、了解offset系列的常用属性及其作用、用法
? ? ? ? 2、offset和style的区别
? ? ? ? 3、offset使用小案例
? ? ? ? 4、独立使用offset实现模态框
1、offset概述：
offset?翻译过来就是偏移量，我们使用?offset?系列相关属性可以动态得到该元素的位置（偏移）、大小等
-
获得元素距离带有定位父元素的位置
-
获得元素自身的大小（宽度高度）
-
注意：返回的数值都不带单位
-
2、offset 与 style的区别
? ? ? ?3、offset小案例
? ? ? ? 案例分析：
? ? ? ? ? ? ? ? <1、我们在盒子内点击，想要得到鼠标距离盒子左右的距离
? ? ? ? ? ? ? ? <2、首先得到鼠标在页面的坐标（e.pageX , e.pageY ）
? ? ? ? ? ? ? ? <3、其次得到盒子在页面中的距离（box.offsetLeft , box.offsetTop）
? ? ? ? ? ? ? ? <4、鼠标距离页面的坐标 - 盒子在页面中的距离 = 鼠标在盒子内的坐标
? ? ? ? ? ? ? ? <5、如果需要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件? mousemove? ? ?
<div class="box"></div>
<script>
var box = document.querySelector('div');
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
})
</script>?
?注：输出结果是鼠标光标移动的位置
4、案例：模态框拖拽
弹出框，我们也称为模态框
功能介绍：
? ? ? ? <1、点击弹出层，会弹出模态框，并且显示半灰色半透明的遮挡层
? ? ? ? <2、点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层
? ? ? ? <3、鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面移动
? ? ? ? <4、鼠标松开，可以停止拖动模态框移动
话不多说，上代码！
<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'; 鼠标到页面的距离 - 鼠标当前位置 = top left
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
</script>点击前：
?点击后：
