当前位置：首页 > news >正文

JavaScript：移动端特效--从触屏事件到本地存储

news 2025/7/13 11:46:14

一、触屏事件

1.触屏事件概述

移动端浏览器兼容性较好，我们不需要考虑一起JS的兼容性问题，可以发现的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也成触屏事件），Android和IOS都有。

touch对象代表一个触摸点。触摸点可能是一根手指，也肯是一根触摸笔。触屏事件可相应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

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

建立一个div盒子来验证一下touch事件

var div = document.querySelector('div');
div.addEventListener('touchstart', function () {console.log(1);
})
div.addEventListener('touchmove', function () {console.log(2);
})
div.addEventListener('touchend', function () {alert('3');
})

执行结果：

2.触摸事件对象（TouchEvent）

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加或减少，等等。

touchstart、touchmove、touchend三个事件各自有事件对象。

触摸事件对象重点我们看三个常见对象列表：

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

如果侦听的是一个DOM元素，touches和targetTouches两个的效果是一样的

var div = document.querySelector('div');
div.addEventListener('touchend', function (e) {alert(e);
})

当我们手指离开屏幕的时候，就没有了touches和targetTouches，但是会有changedTouches

var div = document.querySelector('div');
div.addEventListener('touchstart', function (e) {console.log(e.targetTouches[0]);
})

targetTouches[0]就可以得到正在触摸DOM元素的第一个手指的相关信息，比如手指的位置等

3.移动端拖动元素

touchstart、touchmove、touchend就可以实现拖动元素
但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面的pageX和pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三部曲：

（1）触摸元素touchstart：获取手指出事坐标，通是活动盒子原来的位置

（2）移动手指touchmove：计算手指的滑动距离，并且移动盒子

（3）离开手指touchend：

注意：手指移动也会触发滚动屏幕，所以这里要组织默认的屏幕滚动e.preventDefault();

我们来做一个拖动盒子的案例来练习一下怎么使用拖动元素

css：

div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;
}

HTML：

<div></div>

JavaScript：

var div = document.querySelector('div');
var startX = 0;//获取手指初始坐标
var startY = 0;
var x = 0//获取盒子原来的位置
var y = 0;
div.addEventListener('touchstart', function (e) {startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;
})
div.addEventListener('touchmove', function (e) {var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault();
})

二、classList属性

1.添加类 element.classList.add('类名');

var div = document.querySelector('div');
div.classList.add('three');

后面可以追加类名，不会覆盖以前的类名，注意，不用加.

2.移除类 element.classList.remove('类名');

div.classList.remove('three');

3.切换类 element.classList.toggle('类名');

div.classList.toggle('three');

原来有这个类名就可以删掉，原来没有就可以加上去

三、移动端常见特效

案例：移动端轮播图

功能和pc端一致，都可以自动播放图片，手指可以拖动播放轮播图

首先把图片放进小li里面

<ul><li><img src="4.jpg" alt=""></li><li><img src="1.jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li><li><img src="4.jpg" alt=""></li><li><img src="1.jpg" alt=""></li>
</ul>

不过为什么要在1前面加上4,4后面补上1呢，这是要防止滑到最后一个图片时出现空白页，加上它们可以衔接更自然，不出现空白页

把基础框架搭好后，按照轮播图的css来写，也就是把每个小li放在一行排列，去掉li前面的小圆点

* {margin: 0;padding: 0;box-sizing: border-box;
}ul {position: absolute;display: flex;/* 添加flex布局让图片横向排列 */height: 200px;width: 110px;overflow: hidden;
}li {list-style: none;
}li img {height: 100%;
}

首先先做轮播图上的小圆点，采用ol的小li来当小圆点，然后给它们加上自己的css

ol {position: absolute;bottom: 5px;right: 5px;
}ol li {display: inline-block;width: 5px;height: 5px;background-color: #fff;list-style: none;border-radius: 2px;
}ol li.current {width: 15px;
}

接下来用js来完善功能

我们首先做自动播放功能，这个采用定时器

window.addEventListener('load', function () {var ul = document.querySelector('ul');var w = container.offsetWidth;var index = 0;var timer = setInterval(function () {index++;var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000)
})

接下来制作无缝滚动功能

ul.addEventListener('transitionend', function () {if (index == 3) {index == 0;ul.style.transition = 'none';var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}else if (index < 0) {index == 2;ul.style.transition = 'none';var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}
})

然后制作小圆点的变化

ol.querySelector('.current').classList.remove('current');
ol.children[index].classList.add('current');

制作在移动端拖动元素

var startX = 0;
var moveX = 0;
ul.addEventListener('touchstart', function (e) {startX = e.targetTouches[0].pageX;clearInterval(timer);timer = setInterval(function () {index++;var translatex = -index * w;ul.style.transition = 'all.3s';ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000)
})
ul.addEventListener('touchmove', function (e) {moveX = e.targetTouches[1].pageX - startX;var translatex = -index * w;ul.style.transition = 'none';ul.style.transform = 'translateX(' + translatex + 'px)';
})
ul.addEventListener('touchend', function (e) {if (Math.abs(moveX) > 50) {if (moveX > 0) {index--;}else {index++;}var translatex = -index * w;ul.style.transition = 'all.3s';ul.style.transform = 'translateX(' + translatex + 'px)';}else {var translatex = -index * w;ul.style.transition = 'all.1s';ul.style.transform = 'translateX(' + translatex + 'px)';}
})

案例：返回顶部

var goBack = document.querySelector('.goBack');
var nav = document.querySelector('nav');
window.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);
})