学习目标:
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>
点击前:
点击后: