移动端简单滑屏效果

分享一个移动端简单滑屏效果

CSS代码如下：

<style>
			.test{
				width: 150px;
				height: 150px;
				font-size: 22px;
				line-height: 150px;
				text-align: center;
				background-color: pink;
				position: absolute;
				left: 0;
				top:0;
			}
		</style>

JS代码如下：

<script type="text/javascript">
			var oTest = document.querySelector(".test");
			//初始化一个对象来保存元素的坐标
			var startPoint = {};
			
			//阻止默认事件
			document.addEventListener("touchstart",function(ev){
				ev.preventDefault();
			},{passive:false})
			
			oTest.addEventListener("touchstart",function(ev){
				//确定初始坐标，通过chengedTouches事件获取到clientx，减去它自身离页面边缘的距离
				startPoint.left = ev.changedTouches[0].clientX - oTest.offsetLeft;
				startPoint.top = ev.changedTouches[0].clientY - oTest.offsetTop;
			},false)
			
			//初始化一个对象，保存元素移动完后的坐标(即前后两次移动的差值)
			var reduce = {};
			oTest.addEventListener("touchmove",function(ev){
				reduce.left = ev.changedTouches[0].clientX - startPoint.left;
				reduce.top = ev.changedTouches[0].clientY - startPoint.top;
			
				//把坐标差值赋值给元素
				oTest.style.left = reduce.left + "px";
				oTest.style.top = reduce.top + "px";
			},false)
		</script>
	

控制台模拟器测试结果，元素可以正常拖动，也可以生成链接在真机上测试，真机上测试也是正常的，tips：真机上测试要保证手机ip和电脑ip在同一网段下