移动端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事件
移动端js手指滑动事件初体验的更多相关文章
- Node.js 网页瘸腿爬虫初体验
延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...
- 移动端H5开发 (滑动事件)
最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...
- 中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
- Slip.js（移动端跟随手指滑动组件，零依赖）
Slip.js可用于移动端滑动banner,移动端整屏滑动等效果,个人觉得用于移动端滑动banner比较好,不会和iScroll.js起冲突,因为它不依赖任何其它的js库. Html: <!do ...
- Node.js的单元测试框架初体验
Mocha是一个功能丰富的JavaScript测试框架,运行在node.js平台和浏览器端,使异步测试变得简单和有趣.Mocha测试是串行的,允许灵活和准确的报告,同时将未捕获的异常映射到相应的测试用 ...
- 【实践】require.js + r.js 代码打包压缩初体验
第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...
- js webapp 滑动事件
var startX, startY, endX, endY; $(".detailImg").on("touchstart", touchStart);$(& ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
- node.js + express 初体验【hello world】
[node.js] 一个神奇的XX 呵呵 :) 不知道怎么形容他才好! [express] 是node.js 开发web应用程序的框架 开发环境:XP 大家共同进步吧 :) 一:前期准备: 1:下载 ...
随机推荐
- POJ3614 Sunscreen 贪心入门
题目大意 给出一些区间和一些点,一个点如果在一个区间内,那么此两者可以匹配.问匹配数最大是多少. 题解 这样的题我们一般都是站在区间上去找与其配对的点.我们可以得到如下性质: 对于一段区间\([l_1 ...
- [Pulgin] 利用swfupload实现java文件批量上传
URL:http://blog.csdn.net/xuweilinjijis/article/details/8876305 之前在网上找过很多相关资料,很多所谓的批量上传都是忽悠人的,真正的批量上传 ...
- 数组map方法与如何使用ES5实现
数组map方法与如何使用ES5实现 JavaScript Array map() 方法 定义 map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. map() 方法按照原始数 ...
- okhttp3 ExceptionInInitializerError 异常处理
okhttp3 在Android4.4上出现下面异常 java.lang.ExceptionInInitializerError at okhttp3.OkHttpClient.newSslSocke ...
- jq+mui 阻止事件冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- [Intermediate Algorithm] - Sum All Odd Fibonacci Numbers
题目 给一个正整数num,返回小于或等于num的斐波纳契奇数之和. 斐波纳契数列中的前几个数字是 1.1.2.3.5 和 8,随后的每一个数字都是前两个数字之和. 例如,sumFibs(4)应该返回 ...
- 一系列令人敬畏的.NET核心库，工具，框架和软件
内容 一般 框架,库和工具 API 应用框架 应用模板 身份验证和授权 Blockchain 博特 构建自动化 捆绑和缩小 高速缓存 CMS 代码分析和指标 压缩 编译器,管道工和语言 加密 数据库 ...
- Laravel 查询某天数据 whereDate
- SPOJ-CRAN02 - Roommate Agreement(前缀和)
CRAN02 - Roommate Agreement Leonard was always sickened by how Sheldon considered himself better tha ...
- 路飞学城Python-Day180
部署作业 [pythonanywhere]