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

知恩️

已于 2022-09-16 22:28:19 修改

阅读量456

点赞数

文章标签：前端 javascript css

于 2022-09-16 22:27:29 首次发布

本文链接：https://blog.csdn.net/IU_dlwlrma/article/details/126898767

版权

本文详细介绍了移动端网页特效的实现，包括触屏事件、触摸事件对象、拖动元素、移动端轮播图的制作，以及classList属性的使用。此外，还探讨了click延时问题和推荐了一些常用的移动端开发插件，如Swiper、superslide、iscroll和Zymedia。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 移动端网页特效

移动端网页特效

1. 触屏事件（touch）

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

2. 触摸事件对象（TouchEvent）

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

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

3. 拖动元素

手指坐标可以用changedTouches[0]中的pageX，pageY获取
拖动原理：计算手指移动的距离，用盒子原来的位置 + 手指移动的位置
手指移动距离 = 手指滑动中的位置 - 手指刚开始触摸的位置
拖动元素思路：
触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置
移动手指touchmove：计算手指的滑动距离，并且移动盒子
离开手指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. 移动端轮播图

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

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

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

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

利用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><img src="upload/focus1.jpg" alt=""></li> /* 在最后一张图后添加第一张图，实现无缝衔接 */
    </ul>
    <!-- 小圆点 -->
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>
// CSS
.focus {
    position: relative;
    padding-top: 44px;
    overflow: hidden;
}
.focus img {
    width: 100%;
}
.focus ul {
    overflow: hidden;
    width: 500%;
    margin-left: -100%;
}
.focus ul li {
    float: left;
    width: 20%;
}
.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}
.focus ol li {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fff;
    list-style: none;
    border-radius: 2px;
    transition: all .3s; // 添加小圆点动画过度
}
.focus ol li.current {
    width: 15px;
}
// js
var focus = document.quuerySelector('.focus');
var ul = focus.children[0];
// focus的宽度
var w = focus.offsetWidth;
var ol = focus.children[1];
// 利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function(){
  index++;
  var translatex = -index * w;
  ul.style.transiton = 'all .3s'; // 添加图片轮播的动画过度
  ul.style.transfrom = 'translateX('+ translatex + 'px)'; // 这里配合动画过度 transition
},2000)
// 过渡完成后，再判断，监听过渡完成事件利用：transitionend
ul.addEventListener('transitionend',function(){
  // 无缝滚动
  if(index >= 3){
    index = 0;
    ul.style.transition = 'none';
    // 利用最新的索性号获得图片移动位置
    var translatex = -index * w;
    ul.style.transfrom = 'translateX()' + translatex + 'px)'
  } else if(index < 0){
    index = 2;
    ul.style.transition = 'none';
    var translatex = -index * w;
    ul.style.transfrom = 'translateX(' + translatex + 'px)';
  }
  // 小圆点跟随变化
  ol.querySeletor('li.current').classList.remove('current');
  ol.children[index].classList.ass('current');
})
// 手指滑动轮播图
var startX = 0;
var moveX = 0; 
var flag = false; // 利用变量控制用户是否有滑动
// 手指触摸元素，获取手指初始坐标
ul.addEventListener('touchstart',function(e){
  // 当手指触摸时停止定时器
  clearInterval(timer);
  startX = e.targetTouches[0].pageX;
})
// 手指移动，计算手指滑动距离，并移动盒子
ul.addEventListener('touchmove',function(e){
  // 计算距离
  moveX = e.targetTouches[0].pageX - start;
  // 移动盒子
  var translatex = -index * w + moveX；
  // 手指拖动不需要添加动过过渡
  ul.style.transition = 'none';
  ul.style.transfrom = 'translateX(' + translatex + 'px)';
  flag = true; // 如果用户手指有移动则使变量为true，在执行下一步操作
  e.preventDefault(); // 阻止滚动屏幕的默认行为
})
// 手指移开，根据滑动距离实现图片下一张或回弹原来图片的效果
ul.addEventListener('touchend',function(e){
  if(flag){
    if(Math.abs(moveX) > 50){  // math.abs取绝对值 不论往右或往左拖动超过50像素都会跳到下一张图，否则会到原来的图
    // 如果往右拖动则手指移动距离为正值，图片跳到上一张
    // 如果往左拖动则手指移动距离为负值，图片跳到下一张
    	if(moveX > 0){
      	index--;
    	}else{
      	index++;
    	}
    	var translatex = -index * w;
    	ul.style.transition = 'all .3s';
    	ul.style.transfrom = 'translateX(' + translatex + 'px)'
  	}else {
    	// 如果手指滑动小于50，则回到原来的图片
    	var translatex = -index * w;
    	ul.style.transition = 'all .3s';
    	ul.stylr.transfrom = 'translateX(' + translatex + 'px)'
  	}
  }
  // 手指离开就重启定时器，先清除定时器，在开启
  clearInterval(timer);
  timer = setInterval(function(){
  	index++;
  	var translatex = -index * w;
  	ul.style.transiton = 'all .3s'; // 添加图片轮播的动画过度
  	ul.style.transfrom = 'translateX('+ translatex + 'px)'; // 这里配合动画过度 transition
	},2000)
})
// 返回顶部
var goBack = document.querySeletor('.goBack');
var nav = document.querySeletor('.div');
// 显示隐藏返回顶部按钮
winow.addEventListener('scroll',function(){
  if(window.pageYoffset >= nav.offsetTop){
    goBack.style.display = 'block';
  } else {
    goBack.style.display = 'none';
  }
})
goBack.addEventListener('click',function(){
  window.scroll(0,0); // 回到顶部
})

5. classList属性

classList是HTML新增的一个属性，可以返回元素的类名。IE10以上版本才支持
<div class="one two"></div>
var div = document.querySelector('div');
console.log(div.classList); // 返回类名列表，存在多个类名以数组的形式
console.log(div.classList[0]); // 输出为one
该属性可在元素中添加或删除类名
添加类名，利用element.classList.add(‘类名’)，在最后添加，不会覆盖以前的类名
删除类名，利用element.classList.remove(‘类名’)
切换类名，利用element.classList.toggle(‘类名’)，如有则删除，如无则添加
1. 添加：div.classList.add('three'); // div新增一个three的类名
2. 删除：div.classList.remove('one'); // 删除div中的one类名
3. 切换：
<button></button>
.bg{background-color:#000}
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
  document.body.classList.toggle('bg')
}) // 每次点击自动检测btn是否有bg这个类名，如果有则删除，如果没有则添加

6. click延时

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放（double tap to zoom）页面
解决延时方案：
禁用缩放：浏览器禁用默认的双击缩放行为，并且去掉300ms的点击延迟
<meta name="viewport" content="user-scalable=no"> // 写在head内
利用touch事件自己封装这个事件解决300ms延迟，原理：

当我们手指触摸屏幕，记录当前触摸事件
当我们手指离开屏幕，用离开的时间减去触摸的时间
如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击
function tap(obj,callback){
  var isMove = false;
  var startTime = 0;
  obj.addEVentListener('touchstart',function(){
    startTime = Date.now(); // 记录触摸时间
  })；
  obj.addEventListener('touchmove',function(){
    isMove = true; // 监测是否有滑动屏幕，有滑动算拖拽，不算点击
  })；
  obj.addEvenetListener('touchend',function(){
    if(!isMove && (Date.now()-startTime) < 150){ // 如果手指触摸和离开时间小于150ms算点击
      callback && callback(); // 执行回调函数
    }
    isMove = false; // 取反 重制
    startTime = 0;
  })
}
// 调用
tap(div,function(){执行代码});
利用fastclick插件(fastclick插件)
// 引入js文件
// 调用插件（复制粘贴到js中即可），后续点击事件正常书写即可
if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}