码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-07-14 17:57:55      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:web前端   js   

今天在公司遇到做一个移动端手指滑动的效果,刚开始用了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手指滑动事件初体验

标签:web前端   js   

原文地址:http://blog.csdn.net/u012763269/article/details/46881291

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!