App touch事件(滑动效果)

最新推荐文章于 2024-01-17 15:50:57 发布

约德尔蒙

最新推荐文章于 2024-01-17 15:50:57 发布

阅读量1.9k

点赞数

分类专栏： App

本文链接：https://blog.csdn.net/gyq04551/article/details/53392500

版权

App 专栏收录该内容

3 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
App touch事件(滑动效果)

*{ padding: 0; margin: 0; } .fa{ height: 300px; width: 600px;; border: 1px solid red; margin: 0 auto; overflow: hidden; } ul{ border: 2px solid black; w
复制链接

扫一扫

专栏目录