文章目录
使用 offset client scroll 完成制作 PC端的一些特效,仿京东放大镜、拖拽移动模态框、淘宝移动端布局flexible.js、淘宝右侧固定侧边栏、动画函数封装、网页轮播图 、节流阀、返回顶部、筋斗云。
移动端网页特效、移动端轮播图 返回顶部、移动端视频插件zy.media.js
1. 元素偏移量 offset 系列
1.1 offset 概述
offset 翻译过来就是偏移量,我们使用offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小(宽度高度)
- 注意:返回的数值都不带单位
offset 系列常用属性:
offset系列属性 | 作用 |
---|---|
element.offsetParent | 返回作为该元素非静态定位的父级元素,如果父级都没有定位则返回 body |
element.offsetTop | 返回元素相对于offsetParent元素上方的偏移 |
element.offsetLeft | 返回元素相对于offsetParent元素左侧的偏移 |
element.offsetWidth | 返回自身包括 padding、边框、内如区的宽度,返回数值不带单位 |
element.offsetHeight | 返回自身包括 padding、边框、内如区的高度,返回数值不带单位 |
1.2 offset 与 style 区别
offset
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值是没有单位的
- offsetWidth 包含padding+border+width
- offsetWidth 等属性是只读属性,只能获取不能赋值
- 所以,我们想要获取元素大小位置,用offset更合适
style
- style 只能得到行内样式表中的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含padding 和 border 的值
- style.width 是可读写属性,可以获取也可以赋值
- 所以,我们想要给元素更改值,用style更合适
1.3 offset 小案例:移动拖拽模态框
案例分析:
- 在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标
- 拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的 left 和 top 的值,这样模态框就可以跟着鼠标走了
- 鼠标按下的触发事件源是最上面的一行。(触发事件源总不能是整个 login div叭)
- 鼠标相对文档页面的坐标 减去 鼠标在盒子内的坐标,才是模态框真正的位置 (left top)
- 鼠标按下mouseup:我们要得到鼠标在盒子的坐标
- 鼠标移动mousemove,就让 模态框的坐标 设置为:鼠标相对文档页面的坐标 减去鼠标在盒子内的坐标,注意移动事件是写到按下事件里面。
- 鼠标松开mousedown,就停止拖拽,就是可以让鼠标移动事件接触。
1.4 offset 小案例:仿京东放大镜
案例分析:
- 整个案例可以分为三个功能模块
- 鼠标经过小图片盒子,黄色的遮挡层和大图片层显示,离开隐藏2个盒子功能
- 黄色的遮挡层跟随鼠标功能
- 移动黄色遮挡层,大图片跟随移动功能。
第3,4点具体细节
- 首先是获得鼠标在盒子的坐标。
- 之后把数值给遮挡层做为left 和 top 值。
- 此时用到鼠标移动事件,但是还是在小图片盒子内移动。
- 发现,遮挡层位置不对,需要再减去盒子自身高度和宽度的一半。
- 遮挡层不能超出小图片盒子范围
- 如果小于 零,就把坐标设置为 0
- 如果大于遮挡层最大的移动距离,就把坐标设置为最大的移动距离
- 遮挡层的最大移动距离:小图片盒子宽度 减去 遮挡层盒子宽度
大图片的移动距离可以根据公式
遮
挡
层
移
动
距
离
遮
挡
层
最
大
移
动
距
离
\frac{遮挡层移动距离}{遮挡层最大移动距离}
遮挡层最大移动距离遮挡层移动距离 =
大
图
片
移
动
距
离
大
图
片
最
大
移
动
距
离
\frac{大图片移动距离}{大图片最大移动距离}
大图片最大移动距离大图片移动距离
完整代码:
仿京东放大镜
2. 元素可视区 client 系列
2.1 client 概述
client翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client 系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
2.2 淘宝 flexible.js 源码分析
完整代码
flexible.js
立即执行函数
之前使用的函数一般都是这种的function fn(){}fn();
(function(){})() 或者 (function(){}())
主要作用:不用为函数命名,创建一个独立的作用域,避免了命名冲突的问题
触发load 事件
- a标签的超链接
- F5 或者 刷新按钮 (或强制刷新)
- 前进后退按钮
load 事件在页面从浏览器缓存中读取时不触发。
pageshow
火狐浏览器有个特点,“往返缓存”,这个缓存中不仅保存着页面数据,还保存了DOM 和 JavaScript的状态,事件上是将整个页面都保存在了内存里/
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow 事件来触发,这个事件在页面显示时触发,无论页面是否来自缓存,在重新加载页面中,pageshow 会在load 事件后触发,根据事件对象中的 persisted 来判断是否缓存中的页面触发的 pageshow 事件,
注意: 这个事件给 window添加。
3. 元素滚动 scroll 系列
3.1 scroll 概述
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll 系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷上去的上侧距离,返回值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回值不带单位 |
element.scrollWidth | 返回自身内容实际的宽度,不含边框,返回值不带单位 |
element.scrollHeight | 返回自身内容实际的高度,不含边框,返回值不带单位 |
3.2 页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条,当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。
滚动条在滚动时会触发onscroll 事件。
3.3 淘宝侧边栏案例
案例分析
- 原先侧边栏是绝对定位
- 当页面滚动到一定位置,侧边栏改为固定定位
- 页面继续滚动,会让返回顶部显示出来
重点
- 需要用到页面滚动事件 scroll ,因为页面是滚动的,所以事件源是document
- 滚动到某个位置,就是判断页面被卷上去的上部值
- 页面被卷去的头部:可以通过 window.pageYoffset 获得,如果被卷去的左侧 window.pageXoffset
- 注意,元素被卷去的头部是 element.scrollTop ,如果是页面被卷去的头部,则是 window.pageYoffset
- 其实这个值,可以通过盒子的 offsetTop 可以得到,如果大于等于这个值,就可以让侧边栏盒子固定定位了
注意: window.pageYoffset 和 window.pageXoffset IE9以上才支持
完整代码:
仿淘宝右侧固定侧边栏
3.4 页面被卷去的头部兼容性解决方案
兼容性的处理了解就行。
需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:
- 声明了 DTD,使用 document.documentElement.scrollTop
- 未声明 DTD,使用 document.body.scrollTop
- 新方法 window.pageYOffset和 window.pageXOffset,IE9 开始支持
声明 DTD,也就是在文档首行 添加
<!DOCTYPE html>
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. offset client scroll 三大系列总结
三大系列对比 | 作用 |
---|---|
element.offsetWidth | 返回自身包括padding、边框、内容区 |
element.clientWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
他们主要用法:
- offset系列 经常用于获得元素位置 offsetLeft offsetTop
- client 经常用于获取元素大小 clientWidth clientHeight
- scroll 经常用于获取滚动距离 scrollTop scrollLeft
- 注意页面滚动的距离通过 window.pageXOffset 获得
5. mouseenter 和 mouseover 的区别
- 当鼠标移动到元素上时就会触发mouseenter 事件
类似 mouseover,它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。
- mouseenter 只会经过自身盒子触发。
- 之所以这样,就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
亲自试一试:mouseenter 与 mouseover 的不同
6. 简单动画函数封装
6.1 动画实现原理
核心原理:通过定时器 setInterval() 不断移动盒子位置。
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上 1 个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用 element.style.left
6.2 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。
//obj目标对象,target 目标位置
function animate(obj, target) {
// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
6.3 缓动效果原理
缓动动画就是让元素的运动速度有所变化, 最常见的是让速度慢慢停下来。
思路:
- 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
- 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离的步长
- 停止的条件:让当前盒子位子等于目标位置就停止定时器
- 注意步长值要取整
6.4 动画函数多个值之间移动
可以让动画函数 从800 移动到 500
当我们点击按钮时候,判断步长是正值还是负值
- 如果是正值,则步长 往大了取整 Math.ceil()。
- 如果是负值,则步长 向小了取整Math.floor()。
6.5 动画函数添加回调函数
回调函数原理:函数可以作为一个参数,将这给函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调
回调函数写的位置:定时器结束的位置。
6.6 动画JS animate.js
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}