前端-JS进阶-移动端网页特效

移动端网页特效

1. 触屏事件（touch）

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

2. 触摸事件对象（TouchEvent）

1. TouchEvent是一类描述手指在触摸平面的状态变化的事件，可检测触点的移动，触点的增加和减少
2. 手指离开屏幕只能用changedTouches检测，touches与targetTouches无法检测
3. changedTouches[0]：得到正在触摸DOM第一个手指的相关信息（如坐标等）

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

3. 拖动元素

1. 手指坐标可以用changedTouches[0]中的pageX，pageY获取
2. 拖动原理：计算手指移动的距离，用盒子原来的位置 + 手指移动的位置
3. 手指移动距离 = 手指滑动中的位置 - 手指刚开始触摸的位置
4. 拖动元素思路：
   1. 触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
   2. 移动手指touchmove：计算手指的滑动距离，并且移动盒子
   3. 离开手指touchend

⚠️ 手指移动也会触发滚动屏幕，所以要阻止默认的屏幕滚动 e.preventDefault()

❤️案例：移动div
<div></div>
var div = document.querySelector('div');
var startX = 0; // 手指初始X轴坐标
var startY = 0; // 手指初始Y轴坐标
var X = 0; // 盒子初始X轴的位置
var Y = 0；// 盒子初始Y轴的位置
div.addEventListener('touchstart',function(e){
   
  // 获取手指点击屏幕后的初始位置
  startX = e.targetTouches[0].pageX
  startY = e.targetTouchrs[0].pageY
  X = this.offsetLeft
  Y = this.offsetTop
})
div.addEventListener('touchmove',function(e){
   
  // 计算手指的移动距离
 	var moveX = e.targetTouches[0].pageX - stratX
  var moveY = e.targetTouches[0].pageY - stratY
  // 移动盒子
  this.style.left = X + moveX + 'px'
  this.style.top = Y + moveY + 'px'
  e.preventDefault(); // 阻止屏幕滚动的默认行为
})

4. 移动端轮播图

1. 移动端轮播图的无缝衔接需在第一张图片前添加最后一张图片，在最后一张图片后添加第一张图片

2. 利用margin-left:-100% 可以把最前面的第一张图隐藏，显示第二张

3. 轮播图中的li设置width为20%（根据图片计算100/5张图=20%）

4. 移动端可利用transfrom（平面移动）与transition（动画过度）制作

5. 利用transitionend检测过度完成事件

// html
<div class="goBack"></div> /* 返回顶部按钮 */
<div class="focus">
    <ul>
        <li><img src="upload/focus3.jpg" alt=""></li> /* 在第一张图前添加最后一张图，实现无缝衔接 */
        <li><img src="upload/focus1.jpg" alt=""></li>
        <li><img src="upload/focus2.jpg" alt=""></li>
        <li><img src="upload/focus3.jpg" alt=""></li>
        <li