移动端网页特效
一、touch
1.1 touch触摸事件
事件 | 说明 |
---|---|
touchstart | 手指触摸到一个DOM元素触发。当一个或多个触摸点与触控设备表面接触时触发touchstart 事件 |
touchmove | 手指在一个DOM元素上滑动时触发 |
touchend | 手指从一个DOM元素移开时触发 |
div.addEventListener('touchstart',function(e){
console.log(e);
})
1.2 touchEvent触摸事件对象
触摸列表 | 说明 | 备注 |
---|---|---|
touches | 正在触摸屏幕的所有手指列表 | 如果侦听的是同一个DOM元素,和targetTouches 是一样的 |
targetTouches | 正在触摸当前DOM元素上的手指的一个列表 | |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无的变化 | 一般用的这个多一点 |
1.2.1 例子 盒子拖动
// 1.触摸元素 touchstart: 获取手指初始位置,同时获得盒子原来的位置
// 2.移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
// 3.离开手指 touchend
// 注意 手指移动 会 触发滚动屏幕 所以需要阻止默认的屏幕滚动 e.preventDefault()
let x, y, xStart, yStart = 0;
let box = document.querySelector("#box");
box.addEventListener("touchstart", function (e) {
// console.log("touchstart", e);
// 手指的开始位置
xStart = e.targetTouches[0].pageX;
yStart = e.targetTouches[0].pageY;
// 盒子的初始位置
x = this.offsetLeft;
y = this.offsetTop;
});
box.addEventListener("touchmove", function (e) {
// console.log("touchmove", e);
// 计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
let moveX = e.targetTouches[0].pageX - xStart;
let moveY = e.targetTouches[0].pageY - yStart;
this.style.left = x + moveX + "px";
this.style.top = y + moveY + "px";
})
// box.addEventListener("touchend", function (e) {
// console.log("touchend", e);
// })
二、回到顶部
2.1例子
<div class="container">
<div id="item1" class="header item"></div>
<div id="item2" class="content item"></div>
<div id="item3" class="footer item"></div>
<div id="item4" class="header item"></div>
<div id="item5" class="content item"></div>
<div id="item6" class="footer item"></div>
<div class="goBack">
<van-icon name="back-top" size="3rem" class="icon" />
</div>
</div>
let goBack = document.querySelector(".goBack");
let container = document.querySelector(".container");
let item3 = document.querySelector("#item3");
container.addEventListener("scroll", function () {
let scrollTop = container.scrollTop;
let offsetTop = item3.offsetTop;
// console.log("scrollTop", scrollTop);
// // 现在这个有点情况 发现高度包括了 header的高度 注意有个offsetParent 是相对于这个的
// console.log("offsetparent", item3.offsetParent);
// // 这个就会发现问题 需要给相对的盒子 加上position
// console.log("offsetTop", offsetTop);
if (scrollTop >= offsetTop) {
goBack.style.display = "block";
} else {
goBack.style.display = "none";
}
})
goBack.addEventListener("click", function () {
container.scroll(0, 0)
})
三、使用插件
3.1 swiper 的组件使用
走马灯的效果
3.2 zy.media.js插件
轻量级的媒体播放器
四、注意
4.1 click延时解决方案
移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放页面
- 解决方法:
1.禁止缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟(如下代码)
<meta name="viewport" content="user-scalable=no"