最近一直在做手机App H5的开发，在开发过程中，经常会遇到很多滑动事件，写个demo，分享自己的一些写法。（如写的不好，轻喷!）

　　直接贴代码

　　html css代码　

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>touch demo</title>

<style type="text/css">

#demo{

    margin-top:200px;

    height: 200px;

    display: -webkit-box;

}

#demo1{

    background: red;

    width: 100%;

    height: 200px;

}

#demo2{

    background: blue;

    width: 100%;

    height: 200px;

}

body{

    overflow: hidden;

}

</style>

</head>

<body>

    <div id="demo">

        <div id="demo1"></div>

        <div id="demo2"></div>

    </div>

</body>

</html>

js代码

	var slideDom = document.getElementById("demo");//滑动区域

	var length = slideDom.children.length;//子类节点长度

	var index = 0;//初始下标

	window.prevX = 0;

	slideDom.addEventListener('touchstart', touchstart, false);

	slideDom.addEventListener('touchmove', touchmove, false);

	slideDom.addEventListener('touchend', touchend, false);

	//开始滑动

	function touchstart(e){

		var point = getPoint(e);

		window.startX = point.pageX;

		console.log(window.startX);

	};

	//滑动过程中

	function touchmove(e){

		e.preventDefault();//阻止默认行为

		var point = getPoint(e);

		window.moveX = point.pageX;

		window.deltaX = window.moveX - window.startX;

		domove(window.deltaX+window.prevX);

	};

	//结束滑动

	function touchend(e){

		var x = Math.abs(window.deltaX);

		var item_w = document.getElementById("demo1").offsetWidth;

		if(window.deltaX>0){

			if(x>item_w){

				var indexd = Math.round(x / item_w);

				index = index - indexd;

			}else{

				if(x/item_w > 0.3){

					index--

				}

			}

		}else if(window.deltaX<0){

			if(x>item_w){

				var indexd = Math.round(x / item_w);

				index = index + indexd;

			}else{

				if(x/item_w > 0.3){

					index++;

				}

			}

		}

		if(index >= (length-1)){

			index = length-1;

		}

		if(index <0 ){

			index = 0;

		}

		window.prevX = -index*item_w;

		domove(window.prevX,true);

	};

	//默认以第一个手指的位置计算

	function getPoint(e) {

		return e.touches ? e.touches[0] : e;

	};

	//利用transform移动

	function domove(x,t){

		if(t){

			slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 300ms ease');

		}else{

			slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 0ms ease');

		}

	};

　　

如果用户是多指操作，默认以第一个手指的位置进行计算。

在事件结束时，对div移动的位置进行计算。

在 index的范围内，如果div移动范围超过的0.3；就在切换到下一index的div；　　

移动端H5开发 (滑动事件)的更多相关文章

  1. 移动端H5开发遇到的问题及解决方法

    本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...

  2. 移动端H5开发自适应技巧

    移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...

  3. 移动端 h5开发相关内容总结(三)

    之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...

  4. 移动端 h5 开发相关内容总结——JavaScript 篇

    1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...

  5. 移动端H5开发中的常见问题处理

    1.问题之合成海报: 功能技术:http://html2canvas.hertzen.com 问题描述:合成模糊.合成区域内容错位,合成不完整,合成边缘白条等. 解决方案:如有页面布局正常合成错位的, ...

  6. 转---移动端 h5开发相关内容总结——CSS篇

    作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...

  7. 移动端 h5开发相关内容总结——CSS篇

    1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ...

  8. 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应

    Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...

  9. 移动端js手指滑动事件初体验

    今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...

随机推荐

  1. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  2. JavaWeb之Filter、Listener

    昨天和大家介绍了一下JSON的用法,其实JSON中主要是用来和数据库交互数据的.今天给大家讲解的是Filter和Listener的用法. 一.Listenner监听器 1.1.定义 Javaweb中的 ...

  3. 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法

    问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示"无记录"的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处 ...

  4. UML软件方法大纲

    利用周末的时间读了潘加宇的<软件方法(上)>,希望梳理清楚UML的知识脉络: 工作流 子流程 内容 备注 建模和uml   利润=需求-设计   愿景   缺乏清晰.共享的愿景往往是项目失 ...

  5. v3学院带你学习EEPROM读写实验

    一.实验背景在消费者电子电讯和工业电子中看上去不相关的设计里经常有很多相似的地方例如几乎每个系统都包括一些智能控制通常是一个单片的微控制器,通用电路例如LCD驱动器远程I/O,RAM,EEPROM或数 ...

  6. python 附加作业01

    题目1: 画方块 输入样例: 10 a 输出样例: 代码: N=eval(input()) c=input() for i in range(N): for j in range(N): print( ...

  7. try{} catch(…){} 讨论（转）

    以前都是用try{} catch(…){}来捕获C++中一些意想不到的异常, 今天看了Winhack的帖子才知道,这种方法在VC中其实是靠不住的.例如下面的代码: .try .{ .BYTE* pch ...

  8. 数据库DDL操作

    DDL1. 数据库* 查看所有数据库:SHOW DATABASES* 切换(选择要操作的)数据库:USE 数据库名* 创建数据库:CREATE DATABASE [IF NOT EXISTS] myd ...

  9. 数位dp初步——数位dp的两种方式

    数位dp:一类统计区间[L,R]内某种符合规定的数字个数的题目.特征是R的范围会很大,O(N)范围内无法完成. 一般而言,解决这类题目有两种方式,一种是递推,另一种是记忆化搜索. 递推: 1)利用dp ...

  10. JavaEE开发之Spring中的多线程编程以及任务定时器详解

    上篇博客我们详细的聊了Spring中的事件的发送和监听,也就是常说的广播或者通知一类的东西,详情请移步于<JavaEE开发之Spring中的事件发送与监听以及使用@Profile进行环境切换&g ...