触屏手指滑动计算演示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>触屏手指滑动计算演示</title>
</head>
<body style="font-size:32px;">
<div style="width:100%">
<h2>触屏手指滑动方向计算演示</h2>
<div id="region" style="background-color:yellow;width:100%;height:50%"></div>
起始坐标<br/>
<input id="touchStart" style="font-size: 48px;"/><br/>
结果计算<br/>
<input id="touchMove" style="font-size: 48px;"/>
</div>
<script type="text/javascript">
/** * 功能：计算手指在指定标签上的滑动的方向*/var tagId = "region";var pressX = 0, pressY = 0;var obj = document.getElementById(tagId);obj.addEventListener('touchmove', function(event) {// 如果这个元素的位置内只有一个手指的话if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];var spanX = touch.pageX - pressX;var spanY = touch.pageY - pressY;var direct = "none";if (Math.abs(spanX) > Math.abs(spanY)) {//水平方向if (spanX > 0) {direct = "right";//向右//do right function} else {direct = "left";//向左//do left function}} else {//垂直方向if (spanY > 0) {direct = "down";//向下//do down function} else {direct = "up";//向上//do up function}}// 把元素放在手指所在的位置touchMove.value = direct + "(" + spanX + ';' + spanY + ")";}}, false);obj.addEventListener('touchstart', function(event) {// 如果这个元素的位置内只有一个手指的话if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置pressX = touch.pageX;pressY = touch.pageY;touchStart.value = pressX + ';' + pressY;}}, false);/*obj.addEventListener('touchend', function(event) {// 如果这个元素的位置内只有一个手指的话if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置touchEnd.value=touch.pageX + ';' + touch.pageY;}}, false);*/
</script>
</body>
</html>触屏手指滑动计算演示相关推荐
- jQuery手机触屏左右滑动切换栏目和焦点图
实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){TouchSlide({slideC ...
- Unity3D制作触屏手机滑动动效果
想要苹果或安卓那种手指滑动屏幕的效果. 这里是原文,使用的是scrollview来演示. http://www.mindthecube.com/blog/2010/09/adding-iphone-t ...
- 飞机大战之四：飞机跟随触屏手指移动
单点触屏事件参考网址:http://blog.csdn.net/sdhjob/article/details/8176588 飞机部分参考网址:http://blog.csdn.net/jackyst ...
- Unity3d 触屏手机滑动事件（上下左右方向精确判断）
private Vector2 st = Vector2.zero; //手指开始按下的位置 private Vector2 end = Vector2.zero; //手指拖动的位置 enum sl ...
- boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图 这里我用到 bootsrap 的轮播图组件 + hammer.js 库 文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
- 仿iphone触屏手机界面
介绍: jquery框架与coffeescript结合制作iphone苹果手机的IOS手机界面主触屏手指划过屏幕整个界面图片左右滑动的触摸效果 网盘下载地址: http://kekewl.net/cH ...
- jquery触屏幻灯片
一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...
最新文章
- Linux-Iptables-Memcached实现内网转发连接
- 云迹科技：站在酒店场景服务机器人的风口
- requestanimationframe_requestAnimationFrame详解以及无线页面优化
- python win7 sp1_[ Python - 15 ] win7安装paramiko问题总汇
- ES 11 - 配置Elasticsearch的映射 (mapping)
- [非原创] 获取CPUID；
- python进程之间修改数据[Manager]与进程池[Pool]
- 超参数调整——网格搜索
- COMSOL6.0 版本新功能：求解大型瞬态声学问题
- 利用java打印出金字塔原理_《金字塔原理》的读后感作文2500字
- c语言51单片机rrc,MCS-51单片机汇编指令详解
- Python 散点图的数据分析
- 打麻将 - 基于R语言
- CI 与 CD 有什么区别
- 系统分析与设计 复习
- 用vmware安装redhat 9出现“光盘无法被挂载”错误的解决办法
- 高中学生计算机科技创新课题,论高中计算机教学中如何培养学生的创新能力
- java生成word带多级标题,word2007中多级标题的设置和目录的自动生成 | 学步园
- 未来计算机行业什么最吃香,未来哪些行业吃香 这四个行业前景比较好
- LeetCode——1217. 玩筹码