简单介绍一下触屏事件
1.触屏事件 touchstart手指触摸屏幕时触发 touchmove手指在屏幕上滑动时连续触发
touchend手指从屏幕上移开时触发 touchcanel当系统停止跟踪触摸时触发
2.部分手势事件
缩放 ：
pinchstart 缩放手势起点
pinchend 缩放手势终点
pinch 缩放手势
pinchin 收缩
pinchout 放大
旋转 ：
rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转
滑动：
swipestart 滑动手势起点
swiping 滑动中
swipeend 滑动手势终点
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
swipe 滑动
拖动开始 dragstart 拖动屏幕
拖动 drag 拖动手势
拖动结束 dragend 拖动屏幕
拖动 drag 拖动手势
长按 hold 长按屏幕
敲击 tap 单击屏幕
doubletap 双击屏幕
下面看一下案例：
实现刮刮乐效果，从模糊到清晰的过程。
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<title>变清晰</title>
<style>
* {
padding: 0;
margin: 0;
}
body,
.wrap {
width: 100vw;
height: 100vh;
background-image: url(https://img2.baidu.com/it/u=653173595,1904139928&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1084);
background-size: cover;
background-position: center center;
}
.wrap:nth-of-type(1) {
filter: blur(20px);
}
.wrap:nth-of-type(2) {
display: none;
}
.wrap.mask {
display: block;
-webkit-mask-image: -webkit-radial-gradient(#fff 65%, transparent 75%);
-webkit-mask-size: 200px 200px;
-webkit-mask-repeat: no-repeat;
}
.wrap {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="wrap"></div>
</body>
<script>
var d2 = document.querySelector('.wrap:nth-of-type(2)');
window.ontouchstart = function(e) {
d2.classList.add('mask');
// d2.style.display = 'block';
}
window.ontouchmove = function(e) {
var touch = e.touches[0];
d2.s.webkitMaskPosition = `${touch.clientX-100}px ${touch.clientY-100}px`;
}
window.ontouchend = function() {
d2.classList.remove("mask");
// d2.style.display = 'none';
}
</script>
<!-- 滑动效果 -->
<script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"></script>
</html>
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
