动画效果之手机页面上下滑屏效果（拖动元素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>