一、PC端网页特效
1、元素偏移量offset系列
1.1 offset概述
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
- 获得元素距离带有定位父元素的距离
- 获得元素自身的大小(宽度高度)
- 注意:返回的数值都不带单位
- 只能获取,不能赋值
1.2 offset系列常用属性
offset系列属性 | 作用 |
---|---|
element.offsetParent | 返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body |
element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
element.offsetWidth | 返回自身包括padding、边框、内容区的宽度,返回数值不带单位 |
element.offsetHeight | 返回自身包括padding、边框、内容区的高度,返回数值不带单位 |
2、元素可视区client系列
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位 |
3、 立即执行函数
不需要调用,立即能够自己执行的函数
写法:
(function() {})()
(function(a,b) {
console.log(a + b);
})(1,2);
(function() {} ())
(function(a,b) {
console.log(a + b);
} (1,2));
作用:
立即执行函数最大的作用就是,独立创建了一个作用域,里面所有的变量都是局部变量,不会有命名冲突的情况
4、元素滚动scroll系列
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷去的上侧距离,返回数值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
element.scrollWidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
element.scrollHeight | 返回自身实际的高度,不含边框,返回数值不带单位 |
window.pageYOffset | 页面被卷去的头部 |
window.pageXOffset | 页面被卷去的左侧 |
window.scroll | 让窗口滚动到页面中的特定位置(x,y不跟单位) |
4.1 scroll滚动事件
当滚动条发生变化时会触发的事件
div.addEventListener('scroll',function(){
console.log(div.scrollTop);
})
5、动画函数封装
5.1 简单动画函数封装
核心原理: 通过定时器
setlnterval()
不断移动盒子位置
注意此元素需要添加定位,才能使用element.style.left
注意函数需要传递2个参数,动画对象和移动到的距离
//简单动画函数封装,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)
}
5.2 缓动动画
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
function animate(obj,target){
//清除定时器,只保留一个执行,防止多个定时器同时执行
clearInterval(obj.timer);
//给不同元素指定不同定时器
obj.timer = setInterval(function(){
//步长值写在定时器里面
var step = (target - obj.offsetLeft) / 10;
//大于0时向上取整,小于0时向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
//停止动画,本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px' ;
},30)
}
5.3 动画函数添加回调函数
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。
//添加形参
function animate(obj,target,callback){
//清除定时器,只保留一个执行,防止多个定时器同时执行
clearInterval(obj.timer);
//给不同元素指定不同定时器
obj.timer = setInterval(function(){
//步长值写在定时器里面
var step = (target - obj.offsetLeft) / 10;
//大于0时向上取整,小于0时向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
//停止动画,本质是停止定时器
clearInterval(obj.timer);
//定时器结束后执行回调函数
if(callback){
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px' ;
},30)
}
5.5 节流阀
防止轮播图按钮连续点击造成潘放过快。
节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。
核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
- 开始设置一个变量
var flag = true;
if(flag){flag = flase; do something}
关闭水龙头- 利用回调函数,动画执行完毕时,
flag = true
,打开水龙头
二、移动端网页特效
1、触屏事件
移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS书写效果但是移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件),Android和IOS都有。
touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
触屏touch事件 | 说明 |
---|---|
touchstart | 手指触摸到一个DOM元素时触发 |
touchmove | 手指在一个DOM元素上移动时触发 |
touchend | 手指从一个DOM元素上移开时触发 |
1.1 触摸事件对象(TouchEvent)
TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
三个常见对象:
触摸列表 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |
div.addEventListener('touchstart',function(e){
console.log(e.targetTouches[0]);
//得到当前正在触摸DOM元素的第一个手指的相关信息
console.log(e.targetTouches[0].pageX);
//得到当前正在触摸DOM元素的第一个手指的x坐标
})
1.2 移动端拖动元素
touchstart、touchmove、touchend
可以实现拖动元素- 但是拖动元素需要当前手指的坐标值我们可以使用
targetTouches[0]
里面的pageX
和pageY
- 移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
- 注意: 手指移动也会触发滚动屏幕,所以这里要阻止默认的屏幕滚动
e.preventDefault();
1.3 补充 classList类名操作
classList
属性是HTML5新增的一个属性,返回元素的类名。- 该属性用于在元素中添加,移除及切换CSS类。有以下方法:
- 添加类:
element.classList.add('类名');
- 移除类:
element.classList.remove('类名');
- 切换类:
element.classList.toggle('类名');
- 添加类:
focus.classList.add('current');
1.4 补充 移动端click事件300ms延时问题解决
移动端 click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面。
解决方案:
- 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable=no">
- 利用touch事件封装这个事件解决300ms延迟
- 原理就是:
- 当我们手指触摸屏幕,记录当前触摸时间
- 当我们手指离开屏幕,用离开的时间减去触摸的时间
- 如果时间小于150ms,并且没有滑动过屏幕,那么我们就定义为点击
//封装tap,解决click 300ms 延时
function tap(obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener("touchstart", function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener("touchmove", function (e) {
isMove = true; // 看看是否有滑动,有滑动算拖拽,不算点击
});
obj.addEventListener("touchend", function (e) {
if (!isMove && Date.now() - startTime < 150) {
// 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function () {
// 执行代码
});
- 使用插件。fastclick插件解决300ms延迟
GitHub官网:https://github.com/ftlabs/fastclick
2、移动端常用开发插件
- Swiper插件
中文官网地址:https://www.swiper.com.cn/ - superslide插件
http://www.superslide2.com/ - iscroll插件
https://github.com/cubiq/iscroll
三、本地存储
本地存储特性:
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,
sessionStorage
约5M,localStorage
约10M
1、window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
存储数据:
sessionStorage.setItem(key,value);
获取数据:
sessionStorage.getItem(key)
删除数据:
sessionStorage.removeItem(key)
删除所有数据:
sessionStorage.clear()
示例:
<input type="text" placeholder="请输入">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var input = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click',function(){
var val = input.value;
sessionStorage.setItem('uname' , val);
})
get.addEventListener('click',function(){
console.log(sessionStorage.getItem('uname'));
})
remove.addEventListener('click',function(){
sessionStorage.removeItem('uname');
})
del.addEventListener('click',function(){
sessionStorage.clear();
})
</script>
2、window.localStorage
- 生命周期永久生效,除非手动删除 否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
存储数据:
localStorage.setItem(key,value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
删除所有数据:
localStorage.clear()