今天在公司遇到做一个移动端手指滑动的效果，刚開始用了swiper.js插件发现效果不好（文字存在模糊效果）。后来查了一些资料，自己手写了一个使用原生js写的滑动效果。

以下直接上代码：

 <!doctype html>

 <html lang="en">

 <head>

 	<meta charset="UTF-8">

 	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="format-detection"content="telephone=no, email=no" />

 	<title>Document</title>

 	<style>

 	#id {

 		width: 1150px;

 		height: 150px;

 		background: red;

 		position: absolute;

 		left: 0px;

 	}

 	.id {

 		width: 40px;

 		height: 150px;

 		background: green;

 		border: solid 1px grey;

 		float: left;

 	}

 	</style>

 </head>

 <body>

 	<div id="inp"></div>

 	<div id="id" style="left:0px;">

 		<div class="id">1</div>

<div class="id">2</div><div class="id"></div><div class="id"></div><div class="id"></div><div class="id"></div>

 	</div>

 </body>

 <script>

 	function load (){

 		/*单指拖动*/

	var obj = document.getElementById('id');

	obj.addEventListener("touchstart", function(event) {

		var touch = event.targetTouches[0];

		var left = parseInt(obj.style.left);

		// alert(left);

		var x = touch.pageX - left;

		var y = touch.pageY - left;

		obj.addEventListener('touchmove', function(event) {

			// 假设这个元素的位置内仅仅有一个手指的话

			if (event.targetTouches.length == 1) {　　　　

				event.preventDefault(); // 阻止浏览器默认事件，重要

				var touch = event.targetTouches[0];

				// 把元素放在手指所在的位置

				obj.style.left = touch.pageX - x + 'px';

				// obj.style.top = touch.pageY + 'px';

			}

		}, false);

	});

	obj.addEventListener("touchend",function(){

		obj.removeEventListener("touchstart");

		obj.removeEventListener("touchmove");

	});

}

window.addEventListener('load',load, false);

 </script>

 </html>

另一个关于

【html5构建触屏站点】之touch事件

的链接地址，有兴趣的大家能够去看一下：
http://www.cnblogs.com/shawn-xie/archive/2012/12/07/2805582.html

移动端js手指滑动事件初体验的更多相关文章

  1. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  2. 移动端H5开发 (滑动事件)

    最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...

  3. 中文代码示例之NW.js桌面应用开发初体验

    先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...

  4. Slip.js（移动端跟随手指滑动组件，零依赖）

    Slip.js可用于移动端滑动banner,移动端整屏滑动等效果,个人觉得用于移动端滑动banner比较好,不会和iScroll.js起冲突,因为它不依赖任何其它的js库. Html: <!do ...

  5. Node.js的单元测试框架初体验

    Mocha是一个功能丰富的JavaScript测试框架,运行在node.js平台和浏览器端,使异步测试变得简单和有趣.Mocha测试是串行的,允许灵活和准确的报告,同时将未捕获的异常映射到相应的测试用 ...

  6. 【实践】require.js + r.js 代码打包压缩初体验

    第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...

  7. js webapp 滑动事件

    var startX, startY, endX, endY; $(".detailImg").on("touchstart", touchStart);$(& ...

  8. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  9. node.js + express 初体验【hello world】

    [node.js]  一个神奇的XX 呵呵 :) 不知道怎么形容他才好! [express] 是node.js 开发web应用程序的框架 开发环境:XP 大家共同进步吧 :) 一:前期准备: 1:下载 ...

随机推荐

  1. 三星抛出万亿投资计划 布局四大科技创新领域（5G、人工智能、汽车半导体、生物技术四大新兴产业）

    三星近日抛出震惊世人的投资计划,未来三年将在全球范围新增投资180万亿韩元(约1万亿元人民币).新增员工4万名.这是韩国单一企业集团大规模的投资计划. 笔者获悉,三星万亿投资计划主要分两大部分,一是在 ...

  2. POJ3204 Ikki's Story - Road Reconstruction 网络流图的关键割边

    题目大意:一个有源有汇的城市,问最少增加城市中的多少道路可以增加源到汇上各个路径上可容纳的总车流量增加. 网络流关键割边集合指如果该边的容量增加,整个网络流图中的任意从原点到汇点的路径的流量便可增加. ...

  3. [HTML&CSS] 条件注释判断浏览器

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

  4. mysql查询orderby

    --按某一字段分组取最大(小)值所在行的数据 /* 数据如下: name val memo a    2   a2(a的第二个值) a    1   a1--a的第一个值 a    3   a3:a的 ...

  5. Android平台下的TCP/IP传输（客户端）

    在工科类项目中,嵌入式系统与软件系统或后台数据库之间的信息传输是实现“物联网”的一种必要的途径,对已简单概念的物联网,通常形式都是一个单片机/嵌入式系统实现数据的采集及其处理,通过蓝牙,wifi或者是 ...

  6. 前后端分离开发,基于SpringMVC符合Restful API风格Maven项目实战（附完整Demo）！

    摘要: 本人在前辈<从MVC到前后端分离(REST-个人也认为是目前比较流行和比较好的方式)>一文的基础上,实现了一个基于Spring的符合REST风格的完整Demo,具有MVC分层结构并 ...

  7. Scrapy中的UA池，代理池，以及selenium的应用

    UA池 代理池 selenium在Scrapy中的应用 UA池 - 下载中间件: - 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用 ...

  8. 使用数组实现ArrayList的效果

    package day04.d2.shuzu; /** * 通过数组实现类似于集合的功能 * 包含功能有: * * 动态添加元素 * 在指定位置添加元素 * * 删除指定下标的元素 * 删除指定内容的 ...

  9. .net几种文件下载的方法

    .Net文件下载方式.... 之前在写上传文件.下载文件的时候,发现Response对象里面有好几种下载文件的方式,之后自己亲自实践了这几种方法,记录下以便以后复习... WriteFile文件下载 ...

  10. VTK+MFC 系列教程 非常强大

    虽然QT才是王道!MFC的懂一些也是好的. 原文链接:http://blog.csdn.net/www_doling_net/article/details/8939115 之前介绍了基于VTK的单文 ...