App touch事件(滑动效果)

刺骨的言语ヽ痛彻心扉 2022-07-14 05:40 173阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<style type="text/css">
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			.fa{
    				height: 300px;
    				width: 600px;;
    				border: 1px solid red;
    				margin: 0 auto;
    				overflow: hidden;
    			}
    			ul{
    				border: 2px solid black;
    				width: 100px;
    				height: 500px;
    			}
    			li{
    				border: 1px solid blue;
    				list-style: none;
    				width: 100px;
    				height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		
    		
    		<div class="fa">
    			<ul>
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    				<li>6</li>
    				<li>7</li>
    				<li>8</li>
    				<li>9</li>
    				<li>10</li>
    			</ul>
    		</div>
    	</body>
    	<script> 
    		
    // 页面加载完毕事件
    window.onload = function () {
    	// 左边的滑动效果
    	left_scroll();
    }
    
    function left_scroll() {
    	// 1获取 必要的元素节点
    
    	// 获取移动的ul
    	var moveUl = document.querySelector("ul");
    
    	// ul父盒子的高度	
    	var parentHeight = document.querySelector(".fa").offsetHeight;
    
    	// ul的高度
    	var ulHeight = moveUl.offsetHeight;
    
    	// 计算移动的范围 因为 往上移动个是 y负方向 所有 这里 是减去 而不是加
    	var minDistance = parentHeight - ulHeight ;
    
    	var maxDistance = 0;
    
    
    	// 定义变量 用来 标示 吸附的距离
    	var delayDistance = 150;
    
    	// console.log('最小值'+minDistance);
    	// console.log('最大值'+maxDistance);
    
    	// 2.通过touch事件 修改 ul的移动
    	// 定义一些变量 记录 距离
    	//  起始值
    	var startY  = 0;
    	// 移动值
    	var moveY = 0;
    	// 总的移动距离
    	var distanceY = 0
    
    	// 将 重复的代码 进行封装
    	var startTransition = function () {
    		moveUl.style.transition = 'all .5s';
    	}
    	var endTransition = function () {
    		moveUl.style.transition = '';
    	}
    	var setTransform = function (distance) {
    		moveUl.style.transform = 'translateY('+distance+'px)';
    	}
    
    
    	moveUl.addEventListener('touchstart',function(event){
    		startY = event.touches[0].clientY;
    	})
    	moveUl.addEventListener('touchmove',function(event){
    		moveY = event.touches[0].clientY - startY;
    
    		// 判断 是否满足 移动的条件
    		if ((moveY+distanceY)>(maxDistance+delayDistance)) {
    			// 修正 moveY
    			moveY = 0;
    			distanceY = maxDistance+delayDistance;
    			// 为什么是减法 因为 往上移动 是负值 要比最小值 还要更小
    		}else if((moveY+distanceY)<(minDistance-delayDistance)){
    			// 修改 moveY
    			moveY = 0;
    			distanceY = minDistance-delayDistance;
    		}	
    		console.log(distanceY);
    		// 关闭 过渡效果
    		// moveUl.style.transition = '';
    		endTransition();
    		// 移动
    		// moveUl.style.transform = 'translateY('+(moveY+distanceY)+'px)';
    		setTransform(moveY+distanceY);
    	})
    	moveUl.addEventListener('touchend',function(event){
    		// 修改移动的总距离
    		distanceY+=moveY;
    
    		// 吸附回去 判断 吸附的方位
    		if (distanceY>maxDistance) {
    			distanceY = maxDistance;
    		}else if(distanceY<minDistance){
    			distanceY = minDistance;
    		}
    
    		// 吸附回去
    		// 移动
    		// moveUl.style.transition  ='all .5s';
    		startTransition();
    		// moveUl.style.transform = 'translateY('+(distanceY)+'px)';
    		setTransform(distanceY);
    	})
    	
    }
    
    	</script>
    	
    </html>