css3 transition 的动画应用之二 鼠标手势事件 控
2019-03-17 本文已影响0人
7级先生
zepto_git_2.gif
图片有点偏移别介意哈
注意几点信息
3个触摸点数组
1.touhches 整块手机屏幕上所有的触摸点对象的集合
2.targetTouches 目标元素（给谁绑定事件 谁目标元素 ）上的所有的触摸点对象的集合
3.changedTouches 在目标元素上发生了状态改变（发生进入，离开，移动 ）的一瞬间的触摸点对象的集合
3对触摸点坐标
1 clientXY 相对于视口的坐标
2 pageXY 相对于页面的坐标
3 screenXY 相对于屏幕的坐标
下面代码复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./util//zepto//dist//zepto.js"></script>
<style>
#box {
position: absolute;
min-height:100vh; // 铺满整个页面
left: 0;
right: 0;
margin: 0px;
}
.right{
position: fixed;
top: 0px;
bottom: 0px;
background-color: rgb(6, 1, 34);
left: -200px;
transition: left 2s;
overflow: hidden;
color: #fff;
}
.right p {
width: 200px;
}
.rightAnimate{
max-width: 0px;
}
</style>
</head>
<body id="box">
<div class="right">
<p>哈哈我是右边</p>
</div>
<p>剋李雷雷里欸日欸了时候好好</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</body>
</html>
<script>
$("#box").on("tap", function () {})
/**
* @向某方向移动--手势事件
* 1.按下的手指的个数不能超过 1 个
* 2.按下时长不能太长 1000ms
* 3.按下记录时间
* 4.离开记录离开的时间 结束时间-开始时间 = 总时长
* 5.滑动的时间大于5px;
* 6.按下记录坐标
* 7.离开记录坐标 ;
* 8.离开的坐标-按下记录坐标>0 向右移动;
* 9.离开的坐标-按下记录坐标<0 向左移动;
*/
var startX;
var startY;
var currentTime
$("#box").on("touchstart", function (e) {
// 判断按下手指触摸数
if (e.touches.length > 1) {
return;
}
// 记录按下时间
currentTime = Date.now()
// 按下记录坐标
startX = e.touches[0].clientX
startY = e.touches[0].clientY
})
$('#box').on('touchend', function (e) {
// 判断按下手指触摸数
if (e.changedTouches.length > 1) {
return;
}
// 记录离开的时间
var endTime = Date.now()
// 时间过久就取消向左点击事件
if (endTime - currentTime > 800) {
return
}
// 记录离开坐标
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
// 注意距离
if ( Math.abs(endX - startX) < 20 || Math.abs(endY - startY) > 20) {
// 都不满足
return;
} else if(endX - startX > 0) {
toRight()
} else if(endX - startX < 0){
toLeft()
console.log(11)
}
})
function toRight(){
$(".right").css({
"left": '0px;'
})
}
function toLeft(){
$(".right").css({
"left": '-200px;'
})
}
</script>
