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

最新推荐文章于 2023-11-11 11:16:29 发布

huihui10086

最新推荐文章于 2023-11-11 11:16:29 发布

阅读量1.2w

点赞数

分类专栏： js web前端文章标签： web前端 js

本文链接：https://blog.csdn.net/u012763269/article/details/46881291

版权

web前端同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

36 篇文章 0 订阅

订阅专栏

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

huihui10086

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
移动端js手指滑动事件初体验

今天在公司遇到做一个移动端手指滑动的效果，刚开始用了swiper.js插件发现效果不好（文字存在模糊效果）。后来查了一些资料，自己手写了一个使用原生js写的滑动效果。下面直接上代码： Document #id { width: 1150px; height: 150px; background: r
复制链接

扫一扫