javascript学习笔记07——PC端网页特效,移动端网页特效

一、PC端网页特效

元素偏移量offset系列

oofset翻译过来就是偏移量，使用offset系列相关属性可以动态得到该元素的位置（偏移），大小等。
- 获取元素距离带有定位父元素的位置
- 获取元素自身的大小（宽度和高度）
- 注：返回的数值不带单位

offset系列常用属性

offset系列属性	作用
element.offsetParent	返回作用该元素带有定位的父级元素如果父亲都没有定位则返回body
element.offsetTop	返回元素相对于`带有定位`父亲元素上方的偏移量,如果没有父元素或者父元素没有定位，则以body为准
element.offsetLeft	返回元素相对`带有定位`父元素左边框的偏移量,如果没有父元素或者父元素没有定位，则以body为准
element.offsetWidth	返回自身`包括padding、边框、内容区的宽度`，返回数值不带单位
element.offsetHright	返回自身`包括padding、边框、内容区的宽度`，返回内容不带单位

offset与style区别
- offset:(1)可以获得任意样式表中的样式值；（2）获得数值没有单位；（3）offsetWidth包含padding+border+width；（4）offsetWidth等是只读属性，只能获取不能赋值。想要获取元素大小位置，用offset合适。
- style：（1）只能得到行内样式表中的样式值；（2）style.width获得的是带有单位的字符串；（3）style.width获得不包含padding和border的值；（4）style.width等是可读写属性，可以获取也可以赋值；想要给元素更改央视值，只能用style实现

元素可视区client系列

client翻译是客户端，使用client系列的相关属性来获取元素可视区的相关信息，可以动态得到该元素的边框大小，元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框大小
element.clientLeft	返回元素左边框大小
element.clientWidth	返回自身包括padding、内容区的`宽度`、`不含边框`，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的`高度`、`不含边框`，返回数值不带单位

立即执行函数(function(){})(),主要作用为创建一个独立的作用域。
- 立即函数的特点：不需要调用，立马能够自己执行。
- 两种写法：(function(){})() 和 (function(){}())
- 后面空的括号相当于调用函数，可以传参
  1
  2
  3
  (function(num){
  console.log(num); // 函数立即执行，输出数值为22
  })(22)
- 立即函数最大的作用就是独立创建了一个作用域。所有变量均为局部变量。
以下三种情况都会刷新页面，都会触发load事件
- a标签的超链接
- F5或者刷新按钮（强制刷新）
- 前进后退按钮
- 注：在火狐浏览器中，有个”往返缓存”，这个缓存不仅保留了页面数据，还保留着JavaScript的状态；实际上是把整个页面都保存在了内存里。所以点击后退按钮将不再执行load刷新页面。所以需要pageshow事件。pageshow是给window添加的

元素滚动Scroll系列

scroll翻译过来就是滚动的意思，使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回`自身实际宽度` ，不含边框，返回数值不带单位
element.scrollHeight	返回`自身实际高度` ，不含边框，返回数值不带单位

页面被卷去的头部
- 如果浏览器的高度（宽度）不足以显示整个页面时，会自动出现滚动条。当滚动条向上滚动时，页面上面被隐藏的高度，就称之为被卷上去的头部。滚动条在滚动时触发onscroll事件。
- 页面滚动距离：新方法window.pageYoffset和window.pageXOffset,从IE9开始支持。
- 声明DTD，使用document.documentElement.scrollTop
- 未声明TDT，使用document.body.scrollTop

mouseenter和mouseover的区别
- mouseenter鼠标事件：当鼠标移动到元素上时就会触发mouseenter事件
- mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只有经过自身盒子才会触发。mouseenter不会冒泡

动画函数封装。

动画实现原理：通过定时器setInterval() 不断移动盒子位置
实现步骤：
- 获取盒子当前位置；
- 让盒子在当前位置加上一个移动距离；
- 利用定时器不断重复这个操作；
- 加上一个结束定时器的条件；
- 注：一定要给元素添加定位，才能使用element.style.left

动画函数简单封装

注意：动画函数需要传递2个参数，动画对象和移动到的距离。
1
2
3
4
//obj目标对象，target目标位置
function animate(obj,target){

}

动画函数给不同的元素记录不同的定时器：核心原理是利用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)
}
var div=document.querySelector('.box');
animate(div,300);  //调用函数

缓动效果原理：缓动动画就是让元素运动的速度有所变化，常见的就是让速度慢慢的降下来。（1）让盒子每次移动的距离慢慢变下，速度就会慢慢降下来。（2）核心算法:（目标值-现在位置）/10作为每次移动的距离步长。（3）停止的条件:让当前盒子位置等于目标位置就停止计时器。

 //obj目标对象，target目标位置
function animate(obj, target) {
 clearInterval(obj.timer); //防止重复调用产生多个计时器。
 obj.timer = setInterval(function() {
  	var step=(target-obj.offsetLeft)/10;
   step=step>0? Math.ceil(step):Math.floor(step);  //是正数则往上取整，负数则往下取整
if (obj.offsetLeft == target) {
 	clearInterval(obj.timer);
}
 obj.style.left = obj.offsetLeft + step + 'px';
	}, 30)
 }
var div = document.querySelector('.box');
    	animate(div, 300); //调用函数

动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传递到另一个函数里面，当那个函数执行完成之后，再执行传进去的这个函数。这就是回调函数。
回调函数写的位置：计时器结束的位置。

轮播图效果的实现
- 实现轮播图滚动可以使用封装好的animate函数
- 到最后一张图片时切换到第一张的方法是：先利用克隆节点方法cloneNode(true)对第一张图进行克隆。当轮播图播放时，检测图片现在播放到第几张，若图片已经到最后一张，则下一张播放克隆图片，然后将真个ul的定位设置为left=0跳回真正的第一张图片的位置。
- 左右点击与底部小圆点的数值绑定

节流阀
- 问题：轮播图按钮连续点击造成图片播放过快。
- 节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个动画，让事件无法连续触发。
- 核心实现思路：利用回调函数添加一个变量控制，锁住函数和解锁函数。

返回页面顶部

滚动窗口到文档中的特定位置window.scroll(x,y),直接到指定位置。
带有动画的返回顶部，使用封装的动画函数。

页面滚动了多少可以通过window.pageYOffset`得到。

     function animate(obj, target, callback) {
  	clearInterval(obj.timer); //防止重复调用产生多个计时器。
  	obj.timer = setInterval(function() {
   	var step = (target - window.pageYOffset) / 10;
   	step = step > 0 ? Math.ceil(step) : Math.floor(step);
 	if (window.pageYOffset == target) {
  	clearInterval(obj.timer);
  	// if(callback){
  	// 	callback();
  	// }或者
   callback && callback()
 	}
 window.scroll(0,window.pageYOffset+step)
	}, 15)
}

二、移动端网页特效

触屏事件
- 移动端浏览器的兼容性较好可以放心使用原生JS书写效果，移动端具有自己独特的地方，触屏事件touch(也称为触摸事件)。
- touch对象代表一个触摸点。触屏事件可响应用户手指对屏幕的操作。
- 常见的触屏事件：
  
  触屏touch事件说明
  
  touchstart 手指触摸到一个DOM元素时触发
  
  touchmove 手指在一个DOM元素上滑动时触发
  
  touchend 手指在一个DOM元素上移开时触发

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指在一个DOM元素上移开时触发

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏，触摸板）等的状态变化的事件。这类事件用于描述一个或多个触点。使开发者可以检测触点的移动，触点的增加和减少。
touchstart , touchmove , touchend 三个事件都会各自有事件对象。

触摸事件对象三个常见的对象列表

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无的变化

移动端拖动元素
- touchstart , touchmove , touchend可以实现拖动元素
- 拖动元素需要当前手指的坐标值，targetTouch[0]里面的pageX和pageY
- 原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离。
- 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置。
- 注: 手指移动也会触发默认的滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault()

移动端常见的特效

轮播图案例：
- 自动播放：开启定时器，移动端移动可以使用translate移动，添加过渡效果
- 无缝滚动：添加检测过渡完成事件transitionend，判断条件，如果索引号等于3说明走到最后一张图片，此时索引号要复原为0。此时图片去掉过渡，然后移动到第一张
- 小圆点跟随效果：（1）把ol里面li带有current类名的选出来去掉类名；（2）让当前索引号的li加上current；（3）但是，是等着过渡结束之后变化，所以这个写道transitionend事件里面。
- 手指滑动轮播图：本质就是ul跟随手指移动，简单说就是移动端拖动元素。(1)触摸元素touchstart，获取手指初始坐标。（2）移动手指touchmove计算手指的滑动距离并且移动盒子。（3）手指离开touchend 根据滑动距离区分不同情况。（4）如果移动小于某个距离就回弹，如果拖动具体大于某个值就上一张或者下一张滑动。
classList属性
- classList属性是HTML5新增的属性，返回元素的类名，IE10以上支持。
- 该属性用于在元素中添加，移除及切除CSS类
- 添加类名：element.classList.add('类名') 是在后面追加类名，不会覆盖已知类名
- 移除类：element.classList.remove('类名') 移除指定类名
- 切换类：element.classList.toggle('类名') 如果元素存在这个类则删除，如果没有这个类则添加。

click点击延时解决方案

移动端click事件会有300ms的延时原因是移动端屏幕双击会缩放（double tap to zoom）页面。
解决方法1：（1）禁止缩放。浏览器禁止默认的双击缩放行为，并且去掉300ms的点击延迟。
1
<mate name="viewport" content="user-scalable=no">

解决方法2 ：利用touch事件自己封装这个事件,原理是，当我们手指触摸屏幕，记录当前触摸时间，当我们手指离开屏幕，用离开的时间减去触摸的时间。如果小于150ms并且没有滑动过屏幕，那我们就定义为点击.

     //解决移动端点击有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(){回调函数})
  tap(div,function(){alert("111")})

解决方法3:fastclick插件解决300ms延时

移动端常用开发插件
- JS插件就是JS文件,它遵循一定的开发规范,方便程序展示效果,拥有特定功能且方便调用。
- 特点:一般为了解决某个问题而专门存在,其功能单一并且比较小。
- Swiper官网: https://3.swiper.com.cn/
- 移动端视频插件 zy.media.js 实现在不同浏览器上视频播放的效果统一
移动端常用的开发框架
- 框架：顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架规定的某种规范进行开发。
- 前端框架有Bootstrap , Vue , Angular , React等。既能开发Pc端也能开发移动端。
- 框架：大而全，一整套解决方案
- 插件：小而单一，某个功能的解决方案