1. 触屏事件
1.1 触屏事件概述
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1.获取元素
var div = document.querySelector('div')
// 2.手指触摸DOM元素事件
div.addEventListener('touchstart', function(){
console.log('我摸你了')
})
// 3.手指在DOM元素身上移动事件
div.addEventListener('touchmove', function(){
console.log('我继续摸你')
})
// 4.手指离开DOM元素
div.addEventListener('touchmove', function(){
console.log('轻轻的我走了')
})
</script>
</body>
1.2 触摸事件对象(TouchEvent)
touches和targetTouches如果侦听的是一个DOM元素,他们两个是一样的
如果我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表
但是会有 changedTouches
1.3 移动端拖动元素
<style>
div {
position: absolute;
left: 0;
top: 0 ;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
// (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
// (3) 离开手指 touchend:
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(); // 阻止屏幕滚动的默认行为
});
</script>
</body>
2. 移动端常见特效
案例:移动端轮播图
移动端轮播图功能和基本PC端一致。
1.可以自动播放图片
2.手指可以拖动播放轮播图
- 案例分析
2.1 classList 属性
<style>
.bg {
background-color: black;
}
&