动画效果之手机页面上下滑屏效果（拖动元素drag、原生js mousedown mousemove mouseup，触摸属性 touch）

刺骨的言语ヽ痛彻心扉 2024-04-19 12:17 13阅读 0赞

<!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>
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		
    		<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