1 - 元素偏移量 offset 系列
1. offset 概述
offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
- 自己思考一下，offsetParent 和 parentNode 的区别
2. offset 与 style 区别
| offset | style |
|---|---|
| 可以得到任意样式表中的样式值 | 只能得到行内样式表中的样式值 |
| 获得的数值是没有单位的 | 获得的是带有单位的字符串 |
| offsetWidth包含padding + border + width | style.width获得不包含padding和border 的值 |
| 只能获取（只读）属性，不能设置属性或赋值 | 可以读写任何行内样式属性 |
| 如果想要获取元素大小位置，用offset更合适 | 如果想要给元素更改值，则需要用style改变 |
案例：动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
function animate(obj, target) {
// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器，解决方案就是让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 一般我们重新设置位置的时候，左边是box.style.left，右边是box.offsetLeft
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
// style.left 获取的是标签中的style属性设置的样式属性的值
// 如果标签中的style没有设置该样式属性，我们获取到的是空字符串
// console.log(box.style.left); // 第一次点击按钮是空字符串
// box.style.left 带单位,可读可写
// 当我们给样式属性设置非法的值，浏览器会帮我们过滤掉
// console.log(box.style.left + 10 + 'px'); // 10px10px
// box.style.left = box.style.left + 10 + 'px';
// box.offsetLeft 不带单位,只读
// 获取盒子当前的位置 offsetLeft offsetTop
// box.style.left = box.offsetLeft + 10 + 'px';
3. 案例：获取鼠标在盒子内的坐标
- 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
- 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
- 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
- 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
- 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
4. 案例：弹出框拖拽
弹出框，我们也称为模态框。
1.点击弹出层，会弹出模态框， 并且显示灰色半透明的遮挡层。
2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
4.鼠标松开，可以停止拖动模态框移动
案例分析：
- 点击弹出层，模态框和遮挡层就会显示出来 display:block;
- 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;
- 在页面中拖拽的原理：鼠标按下并且移动， 之后松开鼠标
- 触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup
- 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了
- 鼠标按下触发的事件源是最上面一行，就是 id 为 title
- 鼠标的坐标减去鼠标在盒子内的坐标， 才是模态框真正的位置。
- 鼠标按下，我们要得到鼠标在盒子的坐标。
- 鼠标移动，就让模态框的坐标设置为，鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。
- 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
<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. 开始拖拽
title.addEventListener('mousedown', function(e) {
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
document.addEventListener('mousemove', move)
function move(e) {
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
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>
5. 案例：美女放大镜
- 鼠标经过小图片盒子， 黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子
- 黄色的遮挡层跟随鼠标。
- 移动黄色遮挡层，大图片跟随移动。
案例分析：
- 黄色的遮挡层跟随鼠标功能。
- 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
- 首先是获得鼠标在盒子的坐标。
- 之后把数值给遮挡层做为left 和top值。
- 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
- 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
- 遮挡层不能超出小图片盒子范围。
- 如果小于零，就把坐标设置为0
- 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
- 遮挡层的最大移动距离：小图片盒子宽度 减去 遮挡层盒子宽度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<!-- 谷歌浏览器支持webp格式的图片，体积更小，图片更清晰，但是其他浏览器不支持，为了兼容性，我们使用jpg格式的 -->
<img src="images/small.jpg" width="350" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" width="800" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$('box');
var smallBox = box.children[0];
var bigBox = box.children[1];
var smallImage = smallBox.children[0];
var mask = smallBox.children[1];
var bigImage = bigBox.children[0];
// 1 鼠标经过的时候显示mask和bigBox，当鼠标离开box的时候隐藏mask和bigBox
// mouseenter mouseleave 不会触发事件冒泡
// mouseover mouseout 会触发事件冒泡
// 如果触发了事件冒泡，当mask跟着鼠标移动的时候会把事件传递给父元素，就是body，所以不能触发事件冒泡
box.onmouseenter = function () {
// 显示 mask和bigBox
mask.style.display = 'block';
bigBox.style.display = 'block'
}
box.onmouseleave = function () {
mask.style.display = 'none';
bigBox.style.display = 'none';
}
// 2 当鼠标在盒子中移动的时候，让mask和鼠标一起移动
box.onmousemove = function (e) {
e = e || window.event;
// 获取鼠标在盒子中的位置，就是mask的坐标
var maskX = getPage(e).pageX - box.offsetLeft;
var maskY = getPage(e).pageY - box.offsetTop;
// 让mask的中心点在鼠标的位置
maskX = maskX - mask.offsetWidth / 2;
maskY = maskY - mask.offsetHeight / 2;
// 把mask限制到box中
// 限制左边在box中
maskX = maskX < 0 ? 0 : maskX;
// 限制上边在box中
maskY = maskY < 0 ? 0 : maskY;
// 限制右边在box中
maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;
// 限制下边在box中
maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY;
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 3 当mask移动的时候，让大图片移动
// 求大图片移动的距离
// 比例公式：mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离
// mask最大能够移动的距离
var maskMax = box.offsetWidth - mask.offsetWidth;
// 大图片最大能够移动的距离
var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth;
var bigImageX = maskX * bigImageMax / maskMax;
var bigImageY = maskY * bigImageMax / maskMax;
// 反向
bigImage.style.left = -bigImageX + 'px';
bigImage.style.top = -bigImageY + 'px';
}
</script>
</body>
</html>
2 - 元素可视区 client 系列
1. client 概述
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
2. 淘宝 flexible.js 源码分析
前面我们学习了 flex + flexible.js + rem 进行移动端布局，现在我们分析其源码。
立即执行函数 (function(){})() 或者 (function(){}())，主要作用是创建一个独立的作用域，避免了命名冲突问题。
下面三种情况都会刷新页面都会触发 load 事件。
- a标签的超链接
- F5或者刷新按钮（强制刷新）
- 前进后退按钮
但是火狐中有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态，实际上是将整个页面都保存在了内存里，所以此时后退按钮不能刷新页面，怎么解决呢？
此时可以使用 window 的 pageshow 事件，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow 会在 load 事件触发后触发。根据事件对象中的 persisted 来判断是否是缓存中的页面触发的pageshow 事件。
(function flexible(window, document) {
// 获取的html 的根元素
var docEl = document.documentElement
// dpr 物理像素比
var dpr = window.devicePixelRatio || 1
// adjust body font size 设置我们body 的字体大小
function setBodyFontSize() {
// 如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
// 的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 设置我们html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我们重新加载页面触发的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
3 - 元素滚动 scroll 系列
1. scroll 概述
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
2. 页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。
3. 页面被卷去的头部兼容性解决方案
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
- 声明了 DTD，使用 document.documentElement.scrollTop
- 未声明 DTD，使用 document.body.scrollTop
- 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
// 使用的时候 getScroll().left
4. 案例：仿淘宝固定右侧侧边栏
- 原先侧边栏是绝对定位
- 当页面滚动到一定位置，侧边栏改为固定定位
- 页面继续滚动，会让返回顶部显示出来
案例分析：
- 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document
- 滚动到某个位置，就是判断页面被卷去的上部值
- 页面被卷去的头部，可以通过window.pageYOffset获得，如果是被卷去的左侧window.pageXOffset
- 注意：元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部，则是 window.pageYOffset
- 其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了
下面代码，当滚动到banner，slider-bar由绝对定位变成固定定位。当滚动到main，显示返回顶部按钮。
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 170 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子，就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
</script>
</body>
</html>
5. 案例：模拟滚动条
因为默认滚动条太难看，而且还有兼容性问题，所以我们模仿系统滚动条。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
/* 不让文字被选中 */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
......
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$('box');
var content = my$('content');
var scroll = my$('scroll');
var bar = my$('bar');
// offsetHeight 元素的大小 + padding + border
// clientHeight 元素的大小 + padding
// scrollHeight 内容的大小 + padding
//1 根据内容的大小，计算滚动条的高度
// 滚动条的高度 / scroll的高度 = box的高度 / 内容的高度
// 当内容的高度大于box的高度，再计算滚动条的高度，否则的话滚动条的高度为0
var barHeight = 0;
if (content.scrollHeight > box.clientHeight) {
barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;
}
bar.style.height = barHeight + 'px';
//2 让滚动条能够拖拽
// 2.1 当鼠标按下的时候，求鼠标在滚动条中的位置
bar.onmousedown = function (e) {
e = e || window.event;
// 鼠标在滚动条中的位置
var y = getPage(e).pageY - bar.offsetTop - box.offsetTop;
// 2.2 当鼠标在页面上移动的时候，求滚动条的位置
document.onmousemove = function (e) {
//求滚动条的位置
var barY = getPage(e).pageY - y - box.offsetTop;
// 控制bar的最大滚动范围
barY = barY < 0 ? 0 : barY;
barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY;
bar.style.top = barY + 'px';
//3 当拖拽滚动条的时候，改变内容的位置
// 内容滚动的距离 / 内容最大能够滚动的距离 = 滚动条滚动的距离 / 滚动条最大能够滚动的距离
// 内容最大能够滚动的距离
var contentMax = content.scrollHeight - box.clientHeight;
// 滚动条最大能够滚动的距离
var barMax = scroll.clientHeight - bar.clientHeight;
var contentY = barY / barMax * contentMax;
content.style.top = - contentY + 'px';
}
}
document.onmouseup = function () {
// 移除鼠标移动的事件
document.onmousemove = null;
}
</script>
</body>
</html>
4 - 三大系列总结（重要）
- offset 经常用于获得元素位置：offsetLeft offsetTop
- client 经常用于获取元素大小：clientWidth clientHeight
- scroll 经常用于获取滚动距离：scrollLeft scrollTop
- 注意页面滚动的距离通过 window.pageXOffset 获得
