offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
<script>
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>offset和style的区别：
案例：拖动模态框(主要看懂js代码逻辑)
分析：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<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>
var link = document.querySelector('#link');
var login = document.querySelector('.login');
var mask = document.querySelector('#bg');
var closebtn = document.querySelector('#closeBtn');
var tit = document.querySelector('#title');
// 1.点击弹出按钮 让隐藏的login和login-bg显示出来
link.addEventListener('click', function () {
login.style.display = 'block';
mask.style.display = 'block';
});
// 2.点击关闭按钮 让隐藏的login和login-bg隐藏
closebtn.addEventListener('click', function () {
login.style.display = 'none';
mask.style.display = 'none';
});
// 3.开始拖拽
// 1>点击阶段：当鼠标在title按下时，得到鼠标在距离盒子中的距离
tit.addEventListener('mousedown', function (e) {
// 鼠标在距离盒子中的距离=鼠标在页面的距离-盒子距离页面的距离
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// 2>拖拽阶段：当鼠标移动时，把不断变化的盒子距离页面的距离给login的left和top
// 不断变化的盒子距离=鼠标在页面的距离（变化）-鼠标距离盒子的距离（固定）
document.addEventListener('mousemove',fn);
// 因为关闭阶段需要禁用这个函数 所以把它单独拿出来
function fn(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// 3>关闭阶段：当鼠标弹起时，停止拖拽
document.addEventListener('mouseup',function () {
document.removeEventListener('mousemove',fn);
})
})
</script>
</body>
</html>
案例：京东图片放大镜（JS部分）
// 因为需要等页面加载完了 再执行js 所以要添加load事件
window.addEventListener('load', function () {
//获取元素
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var preview_img = document.querySelector('.preview_img');
// 1.当鼠标经过 preview_img 时，mask 和 big 显示出来
preview_img.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
});
// 当鼠标离开 preview_img 时，mask 和 big 隐藏
preview_img.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
});
// 2.让 mask 跟随鼠标移动 需要得到鼠标 在 preview_img 中的位置 把它赋值给 mask
preview_img.addEventListener('mousemove', function (e) {
// 获得得到鼠标 在 preview_img 中的位置
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 把获得的位置赋值给 mask ，由于移动时 鼠标要在mask居中 所以 mask 还要往左和上移动自己宽和高的一半
// 新增判断条件 控制 mask 盒子的移动范围 由于 mask 盒子 是通过left和top值进行确定位置
// 所以mask的最大移动范围是 preview_im 盒子的宽度减去mask 盒子宽度
var maskX = x - mask.offsetWidth / 2; // mask left值
var maskY = y - mask.offsetHeight / 2; // mask top值
var maskMaxX = preview_img.offsetWidth - mask.offsetWidth; // mask 盒子的移动范围的x值
var maskMaxY = preview_img.offsetHeight - mask.offsetHeight; // mask 盒子的移动范围的y值
if (maskX < 0) {
maskX = 0;
} else if (maskX > maskMaxX) {
maskX = maskMaxX;
}
if (maskY < 0) {
maskY = 0;
} else if (maskY > maskMaxY) {
maskY = maskMaxY;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 3. 大图片的移动距离 = 小图片移动距离(maskX/maskY) * 大图片最大移动距离 / 小图片的最大移动距离(maskMaxX/maskMaxY)
// 获取大图片元素
var bigImg = document.querySelector('.bigImg');
// 大图片最大移动距离
var bigImgMaxX = bigImg.offsetWidth - big.offsetWidth;
var bigImgMaxY = bigImg.offsetHeight - big.offsetHeight;
// 大图片的移动距离
bigImg.style.left = -(maskX * bigImgMaxX / maskMaxX) + 'px';
bigImg.style.top = -(maskY * bigImgMaxY / maskMaxY) + 'px';
})
});
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
