关键词：
在制作该案例之前，我们需要先做好准备工作！
有句话怎么说来着？！
没错！
磨刀不误砍柴工！
目录
首先，我们要先复习一个知识点——BOM中的offset系列
Offset系列
概念
offset系列可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
offset属性
- element.offsetParent
- element.offsetTop
- element.offsetLeft
- element.offsetWidth
- element.offsetHeight
代码实操
offset系列应用感受：
<style>
*
margin: 0;
padding: 0;
.father
/* position: relative; */
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
.son
position: absolute;
/* 当给子盒子加了absolute那就可以直接让子盒子相对于父盒子的距离得到了 */
width: 200px;
height: 200px;
background-color: purple;
margin-left: 45px;
.w
/* width: 300px; */
height: 300px;
margin: 200px auto;
background-color: skyblue;
</style><body>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
console.log(father.offsetTop); //得到father这个盒子距离页面顶部距离100px
console.log(father.offsetLeft); //得到father这个盒子距离页面左边距离100px
// 它以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以body为准
console.log(son.offsetLeft);
//得到父盒子距离页面左边100px加上+子盒子距离父盒子45px的距离=145px
// 为了得到子盒子在父盒子中的距离就给父盒子加个定位
var w = document.querySelector('.w');
console.log(w.offsetWidth); //如果不给宽度值就会占满整个页面
// offset得到盒子的宽度+border+padding
</script>
</body>
father.offsetTop得到的就是距离father这个盒子距离父盒子的上面相距100px；
同理， father.offsetLeft是father这个盒子距离父盒子的左边相距100px；
son.offsetLeft 中由于son这个盒子绝对定位是相对于整个页面body，father这个盒子没有使用相对定位，所以此时son.offsetLeft得到的值是son盒子距离整个页面body145px；
若给father这个盒子给个相对定位的话，那son这个盒子就相对于father这个盒子此时输出的值就是45px。
Offset知识点小结
了解这个知识点后我们才能更好将知识点灵活运用到我们的案例中！
拖动模态框案例
♠在制作这个案例，我们一拿到手就先去考虑它想要的效果。
- 当我们点击“点击，弹出登录框”后就会弹出登录框
- 然后当把鼠标按下在“登陆会员”这一栏就能移动这个框框
- 其次就能移动这个框
♠有了思路，我们就要动手先去搭建框架。
CSS样式代码：
<style>
*
margin: 0;
padding: 0;
a
text-decoration: none;
color: #333;
.login-header
text-align: center;
font-size: 30px;
.login
display: none;
position: absolute;
left: 50%;
top: 50%;
margin: 50px auto;
text-align: center;
background-color: tomato;
width: 400px;
height: 200px;
padding-top: 20px;
z-index: 9999;
#close
display: block;
color: black;
font-size: 12px;
position: absolute;
right: -9px;
top: -10px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
padding-top: 5px;
padding-right: 3px;
box-sizing: border-box;
/* “关闭”按钮我用来伪类来做 */
#close::after
content: '关闭';
.title:hover
cursor: move
.login-input
margin-top: 35px;
.login-input>input
border: #fff;
padding: 5px 2px;
.login-input-content
padding-left: 15px;
margin-top: 48 px;
.login-input-content>input
border: #fff;
padding: 5px 2px;
.login-button
margin-top: 25px;
#login-button-submit
padding: 6px 50px;
border: 1px solid #fff;
/* 遮罩层 */
.login-bg
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .2);
</style>HTML页面框架代码：
<div class="login-header">
<!-- 用a链接来做点击的按钮 -->
<a id='link' href="javascript:;">点击，弹出登录框
</a>
</div>
<div class="login">
<i id="close"></i>
<!-- “关闭”按钮 -->
<!-- 每一行用一个div -->
<div class="title">登陆会员</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name='info[username]' class="uname">
</div>
<div class="login-input">
<label>登陆密码：</label>
<input type="password" placeholder="请输入登录密码" name='info[password]' class='paswd'>
</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>♠框架出来了，我们就要实现动态效果。
在Javascript中先获取元素，再绑定事件本事件就是当点击的时候能够触发让登录框出现和隐藏(关闭）效果。
<script>
var header = document.querySelector('.login-header');
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var closeBtn = document.querySelector('#close');
header.addEventListener('click', function()
// 遮罩层出现
mask.style.display = 'block';
login.style.display = 'block';
)
// 当点击关闭按钮就会把mask和login都隐藏掉
closeBtn.addEventListener('click', function()
// 遮罩层消失
mask.style.display = 'none';
login.style.display = 'none';
)
</script>♠拖动登录框，我们先要获取鼠标再这个登录框的坐标
var title = document.querySelector('.title');
title.addEventListener('mousedown', function(e)
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;♠拖拽登录框时所需要的鼠标事件：mousedown、mousemove、mouseup
鼠标移动的时候，把 鼠标在页面中的坐标减去-鼠标在盒子内的坐标 =就是模态框的left和top值
document.addEventListener('mousemove', function(e)
login.style.left = e.pageX - x + 'px';
//offset不能赋值所以只能够用style来赋值！！
login.style.top = e.pageY - y + 'px';
)
document.addEventListener("mouseup", function(e)
document.addEventListener("mousemove", function()
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
)Javascript全部代码
💐最后给各位贴心送上Javascript的全部代码：
<script>
var header = document.querySelector('.login-header');
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var closeBtn = document.querySelector('#close');
header.addEventListener('click', function()
// 遮罩层出现
mask.style.display = 'block';
login.style.display = 'block';
)
// 当点击关闭按钮就会把mask和login都隐藏掉
closeBtn.addEventListener('click', function()
// 遮罩层消失
mask.style.display = 'none';
login.style.display = 'none';
)
// 开始拖拽这个窗口
// 当我们鼠标按下就获得鼠标在盒子里的坐标
var title = document.querySelector('.title');
title.addEventListener('mousedown', function(e)
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// 鼠标移动的时候，把 鼠标在页面中的坐标减去-鼠标在盒子内的坐标 =就是模态框的left和top值
document.addEventListener('mousemove', function(e)
login.style.left = e.pageX - x + 'px';
//offset不能赋值所以只能够用style来赋值
login.style.top = e.pageY - y + 'px';
)
document.addEventListener("mouseup", function(e)
document.addEventListener("mousemove", function()
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
)
)
)
</script>总结
这个案例的知识点主要是围绕offset系列属性来进行应用，然后还有一个小案例也结合在里面，就是当鼠标在一个盒子内求出鼠标的坐标。
经过这一案例希望大家能够有较好的学习收获！
javase案例04——io流综合运用案例案例(代码片段)
1需求将以下的打乱顺序的出师表重新进行排序，并输出到另一个文件！一、先帝创业未半而中道崩殂,五、然侍卫之臣不懈于内,六、忠志之士忘身于外者,二、今天下三分,九、诚宜开张圣听三、益州疲弊,八、欲报之于陛下也,七... 查看详情
0188案例：模态框拖拽(代码片段)
...住鼠标拖拽模态框在页面中移动。?4.鼠标松开，可以停止拖动模态框移动1.1.5模态框拖拽案例分析点击弹出层，模态框和遮挡层就会显示出来display:block;点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;在页面中拖拽的原理... 查看详情
javase案例02——date日期类时间格式化类的综合运用案例(代码片段)
需求：请写出”2022-11-0409:30:30“往后1天15小时，30分29秒后的时间是多少？思路：定义一个字符串时间把字符串的时间解析成Date日期对象得到日期对象的时间毫秒值+往后走1天15小时，30分29秒把时间毫秒值转换成喜欢的字符串的... 查看详情
原生js-实现拖动模态框效果(代码片段)
前言：效果虽丑，但是主要考查的是对pageX，pageY和offset属性的掌握。效果代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title>< 查看详情
javaee框架技术之14ssm综合案例(代码片段)
SSM综合案例一、课程目标1.【掌握】SSM整合2.【√】学习Lombok使用3.【理解】Layui页面书写（备注：其他前端技术也可以）4.【理解】理解SSM综合案例表的结构5.【掌握】产品管理二、SSM整合Spring+SpringMVC+Mybatis–>SSMSpring+Struts2+Hiber... 查看详情
03ssm综合案例之16springsecurity(代码片段)
day03_SSM综合案例一、课程目标1.【理解】SpringSecurity权限框架2.【掌握】使用SpringSecurity进行用户登录3.【掌握】资源权限管理二、SpringSecurity2.1什么是SpringSecuritySpringSecurity的前身是AcegiSecurity，是Spring项目组中用来提供安全认... 查看详情
javaee框架技术之17之ssm综合案例角色管理(代码片段)
day04_SSM综合案例一、课程目标1.【掌握】角色管理功能 要求：1.1框架必须掌握住； 1.2这次的使用来复习注解sql开发 1.3restful风格的实现，有能力的去尝试2.【掌握】用户管理功能二、角色管理2.1查询角色2.1.1RoleMapper接口@Select("sele... 查看详情
javaee框架技术之14ssm综合案例产品管理crud(代码片段)
SSM综合案例一、课程目标1.【掌握】SSM整合2.【√】学习Lombok使用3.【理解】Layui页面书写（备注：其他前端技术也可以）4.【理解】理解SSM综合案例表的结构5.【掌握】产品管理二、SSM整合Spring+SpringMVC+Mybatis–>SSMSpring+Struts2+Hiber... 查看详情
javaee框架技术之15ssm综合案例订单管理查询(代码片段)
day02_SSM综合案例一、课程目标1.【掌握】订单管理查询2.查询所有订单信息3.理解关系--mybatis；一对多一对一4.理解订单详情二、订单管理2.1查询所有订单2.1订单表关系结构图2.2创建相应的实体类//会员类@Data@AllArgsConstruct... 查看详情
指令综合运用-品牌案例.html
案列：使用vue实现品牌的增加，删除和关键字搜索以及时间的处理分析:手动实现筛选的方式：筛选框绑定到vm实列中的searchName属性中：<hr>输入筛选名称：<inputtype="text"v-model="searchName"> 使用v-for指令循环每一行的数据... 查看详情
webapisbom-操作浏览器之综合案例(代码片段)
前期整理的WebAPIst内容21篇附在文章末尾案例:本地存储学习信息案例需求：改为本次存储版本的学习信息表需求：改为本次存储版本的学习信息表分析：需求①：读取本地存储数据（封装函数）如果本地存... 查看详情
javaee框架技术之15ssm综合案例订单管理查询(代码片段)
day02_SSM综合案例一、课程目标1.【掌握】订单管理查询2.查询所有订单信息3.理解关系--mybatis；一对多一对一4.理解订单详情二、订单管理2.1查询所有订单2.1订单表关系结构图[外链图片转存失败,源站可能有防盗链机制,建议将... 查看详情
py07_10：class之综合小案例(代码片段)
classGame(object):top_score=0#类属性def__init__(self,name):self.name=name#实例属性@staticmethoddefshow_help():#静态方法print(‘帮助信息：。。。‘)@classmethoddefshow_top_score(cls):#类方法print(‘历史最高分：%s‘%cls.top_score)defstart_game(self):#实例... 查看详情
做一个vue模态弹出框如何(代码片段)
运用的知识点包括：路由的配置插槽vue的过渡动画路由重定向 router/index.js里面配置路由importVuefrom‘vue‘importRouterfrom‘vue-router‘importHomefrom‘@/components/home‘importAboutfrom‘@/components/about‘Vue.use(Rout 查看详情
一道c语言比赛真题，比较考验数组的综合运用，先给大家打个样(代码片段)
...目如下：内容我大概看了一下，非常考验数组的综合运用，以及数组下标的运用。首先在讲之前先给大家科普一下数组下标的巧妙运用：#include<bits/stdc++.h>usingnamespacestd;intmain() intn,a[100],b; ci 查看详情
一道c语言比赛真题，比较考验数组的综合运用，先给大家打个样(代码片段)
...目如下：内容我大概看了一下，非常考验数组的综合运用，以及数组下标的运用。首先在讲之前先给大家科普一下数组下标的巧妙运用：#include<bits/stdc++.h>usingnamespacestd;intmain() intn,a[100],b; ci 查看详情
element.parentnode案例：关闭模态框(代码片段)
1<!doctypehtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<style>7div8width:400px;9height:400px;10border:1pxsolidblack;11background-color:pink;12position:relative;/*子绝父相*/131415#x16width:20px;17height:20px;18position:absolu... 查看详情
linuxcentos8（http综合案例-用户登录）(代码片段)
LinuxCentOS8（HTTP-用户登录）当服务器端希望客户端以特定的用户进行访问访问时，可以运用HTTP的用户登录功能。HTTP有四种对用户身份验证的方式，分别为BASIC认证，DIGEST认证，SSL客户端认证和Web表单认证。... 查看详情