| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
| |
<title>Document</title> |
| |
<style> |
| |
div{ |
| |
width: 100px; |
| |
height: 200px; |
| |
background-color: #0f0; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div></div> |
| |
<script> |
| |
// 1. 获取div |
| |
var div = document.querySelector('div'); |
| |
// 2. 获取手指开始的Y的位置 |
| |
// 3. 获取手指滑动中的时候Y的位置 |
| |
// 4. 用滑动中的Y位置 - 开始Y的位置 = 手指移动的距离 |
| |
// 5. 把手指移动距离设置给div的位移 |
| |
// 开始的Y 滑动中的Y 滑动距离Y 当前的位置 |
| |
var startY = moveY = distanceY = currentY = 0; |
| |
div.addEventListener('touchstart', function (e) { |
| |
startY = e.touches[0].clientY; |
| |
}); |
| |
div.addEventListener('touchmove', function (e) { |
| |
moveY = e.touches[0].clientY; |
| |
distanceY = moveY - startY; |
| |
// console.log('startY'+startY); |
| |
// console.log('moveY'+moveY); |
| |
// console.log('distanceY'+distanceY); |
| |
// 把距离设置给div的位移 注意带单位(currentY+distanceY) 加上之前的位置和当前滑动的距离 最终位移 带括号 |
| |
div.style.transform = 'translateY('+(currentY+distanceY)+'px)'; |
| |
}); |
| |
// 当 松开手的时候 把之前div已经移动到位置作为下一次起点 |
| |
div.addEventListener('touchend', function (e) { |
| |
//当前的位置 += 之前所有的距离的和 |
| |
currentY += distanceY; |
| |
}); |
| |
</script> |
| |
</body> |
| |
</html> |
