【JS网页特效】PC端、移动端网页特效、本地存储

一、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、 立即执行函数

不需要调用，立即能够自己执行的函数

写法：

1. (function() {})()

(function(a,b) {
	console.log(a + b);
})(1,2);

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 移动端拖动元素

1. touchstart、touchmove、touchend可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
3. 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置＋手指移动的距离
4. 注意： 手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动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)页面。

解决方案：

1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<meta name="viewport" content="user-scalable=no">

2. 利用touch事件封装这个事件解决300ms延迟
   • 原理就是：
   1. 当我们手指触摸屏幕，记录当前触摸时间
   2. 当我们手指离开屏幕，用离开的时间减去触摸的时间
   3. 如果时间小于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 () {
	// 执行代码
});

3. 使用插件。fastclick插件解决300ms延迟
   GitHub官网：https://github.com/ftlabs/fastclick

2、移动端常用开发插件

1. Swiper插件
   中文官网地址：https://www.swiper.com.cn/
2. superslide插件
   http://www.superslide2.com/
3. iscroll插件
   https://github.com/cubiq/iscroll

三、本地存储

本地存储特性：

1. 数据存储在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sessionStorage约5M，localStorage约10M

1、window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口（页面）下数据可以共享
3. 以键值对的形式存储使用

存储数据：

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

1. 生命周期永久生效，除非手动删除 否则关闭页面也会存在
2. 可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

存储数据：

localStorage.setItem(key,value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

删除所有数据：

localStorage.clear()