移动端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:下载 ...
随机推荐
- hdoj-1004-Let the Balloon Rise（水题）
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- js 随机生成信用卡号
本文实例讲述了JavaScript随机生成信用卡卡号的方法.分享给大家供大家参考.具体分析如下: 这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用 ...
- Linux下JDK Tomcat MySQL基本环境搭建
1. 安装JDK wget http://download.oracle.com/otn-pub/java/jdk/8u181-b13/96a7b8442fe848ef90c96a2fad6ed6d1 ...
- ios网络模拟
ios网络模拟 在ios开发和测试中,需要针对不同网络状况做一下测试优化,如果在真机上用真实网络的话,需要不同网络(2G.3G.4G)的手机卡,比较麻烦. 其实可以模拟不同网络状况,以下分别针对真机和 ...
- 查看 myeclipse激活状态
查看激活状态 myeclipse-->subscription information
- oracle数据库rman备份与还原
我是oracle 界的小白,由于公司领导要求,不得不硬着头皮在网上找rman备份还原的方法,废话不多说,具体看例子(window) 运行CMD: rman target 管理员账号/密码@orcl 备 ...
- WinForm——操作word文档
解决方案资源管理器——引用——(右击)添加引用——COM 1. 安装Office,添加引用COM里面的 Microsoft Word 14.0 Object. Library 2. 导命名空间 usi ...
- python3 常用模块详解
这里是python3的一些常用模块的用法详解,大家可以在这里找到它们. Python3 循环语句 python中模块sys与os的一些常用方法 Python3字符串 详解 Python3之时间模块详述 ...
- XML 之 命名空间详解
最近学xml 遇到了点小问题qaq 找了n多的博客大佬,反复看了半小时终于明白了,可能我太蠢了... 基础的知识就不赘述,直接放“栗子”,切重点: <?xml version="1.0 ...
- vue2 阻止时间冒泡
click.stop.prevent <div class="content-right" @click.stop.prevent="pay" > ...