动画效果之手机页面上下滑屏效果（拖动元素drag、原生js mousedown mousemove mouseup，触摸属性 touch）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#main {
position: relative;
width: 600px;
height: 800px;
border: 2px solid red;
margin: 100px auto;
overflow: hidden;
}
img {
display: block;
width: 600px;
height: 2000px;
position: absolute;
top: -500px;
}
</style>
</head>
<body>
<div id="main">
<img src="img/pic.gif" draggable="true">
</div>
<!--
实现上下拖动的效果几乎都是一个思想
1，按下的时候记录位置
2，移动的时候记录位置
3，根据之间的差值，判断是上移还是下移
4，根据上移下移移动图片距离
-->
<!-- 刚做完这个，还没确定用什么属性，就像位置一样，不只一个属性，根据自己的口味 -->
<!-- 使用拖拽属性实现上下拖动 -->
<!-- <script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
var startY = 0;
var y = 0;
var endY = 0;
var disY = 0
img.ondragstart = function(e) {
startY = e.offsetY;
}
img.ondrag = function(e) {
y = e.offsetY;
disY = y - startY;
if (disY > 30) {
var newTop = parseInt(getComputedStyle(img).top) + 10;
console.log(newTop);
//边界
if(newTop==0){
newTop=0;
return;
}
img.style.top = newTop + 'px';
} else if (disY < -30) {
var newTop = parseInt(getComputedStyle(img).top) - 10;
if(newTop==-1000){
newTop=-1500;
return;
}
img.style.top = newTop + 'px';
}
}
</script> -->
<!-- 使用原生js实现上下拖动 -->
<!-- 与拖拽元素不同的是，js实实现拖拽必须要用到的三个事件，onmousedown，onmouseover，onmouseup -->
<!-- <script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
var startY = 0; //开始值
var y = 0;
var disY = 0;
var order = false;
window.onmousedown = function(e) {
order = true;
startY = e.offsetY;
console.log(2)
return false;
}
window.onmousemove = function(e) {
if (!order) {
return;
}
y = e.offsetY
disY = y - startY;
if (disY > 30) {
var newTop = parseInt(getComputedStyle(img).top) + 10;
console.log(newTop);
if (newTop == 0) {
newTop = 0;
return;
}
img.style.top = newTop + 'px';
} else if (disY < -30) {
var newTop = parseInt(getComputedStyle(img).top) - 10;
if (newTop == -1000) {
newTop = -1500;
return;
}
img.style.top = newTop + 'px';
}
return false;
}
window.onmouseup = function(e) {
order = false;
}
</script> -->
<!-- 使用触摸事件实现上下移动 -->
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
var touchstartY = 0;
var touchmoveY = 0;
var touchendY = 0;
window.ontouchstart = function(event) {
touchstartY = event.changedTouches[0].screenY; //得到手指按下点的Y轴值
// console.log(touchstartY)
}
window.ontouchmove = function(event) {
touchmoveY = event.changedTouches[0].screenY; //不断监听下拉过程中手指的位置
if ((touchmoveY - touchstartY) > 30) { //手指下滑,并且下滑距离超过30
console.log('直接获取：'+img.style.top , '计算后的样式 '+parseInt(img.style.top ))
//直接获取： 计算后的样式 NaN
//直接获取：-480px 计算后的样式 -480
//所以直接获取是个字符串,所以要转换,但需要注意的是,不能直接转换,因为第一个返回NaN;
//总结,凡是自身属性都不能直接获取,即 style. 这样的都不能直接获取
//当然也有替代属性,例如offsetWidth替代width,offsetTop替代top
var newTop = parseInt(getComputedStyle(img).top) + 20;
//图片移动范围限制
if (newTop == 0) {
newTop = 0;
return;
}
img.style.top = newTop + 'px';
} else if ((touchmoveY - touchstartY) < -30) {
var newTop = parseInt(getComputedStyle(img).top) - 20;
if (newTop == -1000) {
newTop = -1500;
return;
}
img.style.top = newTop + 'px';
}
}
/*
总结：
1，拖拽事件和触摸事件相似，都是只需要两个事件就可以，分别为开始时事件（坐标），过程事件（坐标）
2，原生js则不同，至少三个，原因是有些不同；在mousemove中，鼠标只要移动至页面上就会触发，
所以需要定义一个判断语句，例如定义了一个true，
在mousestart改变为false；
在mousemove判断是不是false，如果不是，即为true，则返回一个空
在mouseup改变false为true
产生的效果就是，按下并开始拖动时，执行相应事件，反之，当手指抬起时，取消相应事件
3，在拖拽事件和触摸事件中，drag，和touchmove，一个是在目标对象拖动时触发，一个是在手指滑动时触发
都不会自动触发，自然不用向mousemove一样
*/
</script>
</body>
</html>
触摸事件参考地址https://blog.csdn.net/kk_yanwu/article/details/73251310
