使用触摸检测滑动（左，右，上或下）

触摸式滑动是指在特定方向上快速移动手指穿过触摸表面的行为。onswipeJavaScript中目前没有“ ”事件，这意味着我们可以使用可用的触摸事件来实现一个事件，并且只需在刷卡时定义，即“刷卡”。

让我们首先定义何时应该将触摸表面上的移动视为滑动。有在玩两个变量这里-在距离旅行了用户对x或y轴的手指touchstart来 touchend，而且，它花时间。基于这两个因素，我们可以决定该操作是否符合滑动和方向。

有了这个，让我们把想法付诸行动，看看如何检测右键（从左到右）。一旦我们能够做到这一点，检测其他3个方向的滑动几乎完全相同。在这个练习中，我们将规定，当用户提出他在触摸手指表面最低为150px发生向右滑动水平从左至右在200毫秒以内。此外，垂直移动的距离不应超过100px，以避免用户斜向滑动的“误报”，我们不希望将其视为向右滑动。

五

三十

<SCRIPT>

window.addEventListener（‘load‘，function（）{

var touchsurface = document.getElementById（‘touchsurface‘），

startx的，

startY，

DIST，

阈值= 150，//所需的最小行程距离被视为滑动

allowedTime = 200，//允许行进该距离的最长时间

elapsedTime，

开始时间

function handleswipe（isrightswipe）{

if（isrightswipe）

touchsurface.innerHTML =‘恭喜，你已经做了右滑动！‘

其他{

touchsurface.innerHTML =‘尚未满足右键滑动的条件‘

}

}

touchsurface.addEventListener（‘touchstart‘，function（e）{

touchsurface.innerHTML =‘‘

var touchobj = e.changedTouches [0]

dist = 0

startX = touchobj.pageX

startY = touchobj.pageY

startTime = new Date（）。getTime（）//记录手指首次与曲面接触时的时间

e.preventDefault（）

}，false）

touchsurface.addEventListener（‘touchmove‘，function（e）{

e.preventDefault（）//在DIV内阻止滚动

}，false）

touchsurface.addEventListener（‘touchend‘，function（e）{

var touchobj = e.changedTouches [0]

dist = touchobj.pageX - startX //在与表面接触时获得手指行进的总dist

elapsedTime = new Date（）。getTime（） - startTime //经过时间

//检查经过的时间是否在指定范围内，水平dist行进> =阈值，垂直dist行进<= 100

var swiperightBol =（elapsedTime <= allowedTime && dist> = threshold && Math.abs（touchobj.pageY - startY）<= 100）

handleswipe（swiperightBol）

e.preventDefault（）

}，false）

}，false）//结束window.onload

</ SCRIPT>

<div id =“touchsurface”>向我扫描</ div>

内touchend，我们检查DIST从行进 touchstart到touchend在指定的阈值以上的正数（即：150），因为在向右扫动，即DIST应该总是基于所使用（与阴性对左轻扫）等式是正。同时，我们确保任何垂直横向移动都小于100px以排除对角线滑动。由于垂直运动可以在起始触点上方或下方发生，因此我们Math.abs()在获得绝对垂直dist旅行时使用，因此在将其与我们的垂直阈值100进行比较时会涵盖两种情况。

通用滑动检测功能

现在我们向右滑动，让我们创建一个更通用的功能，检测4个方向（左，右，上或下）中的任何一个方向的滑动：

五

三十

function swipedetect（el，callback）{

var touchsurface = el，

swipedir，

startx的，

startY，

distX，

distY，

阈值= 150，//所需的最小行程距离被视为滑动

约束= 100，//垂直方向同时允许的最大距离

allowedTime = 300，//允许行进该距离的最长时间

elapsedTime，

开始时间，

handleswipe = callback || 函数（swipedir）{}

touchsurface.addEventListener（‘touchstart‘，function（e）{

var touchobj = e.changedTouches [0]

swipedir =‘无‘

dist = 0

startX = touchobj.pageX

startY = touchobj.pageY

e.preventDefault（）

}，false）

touchsurface.addEventListener（‘touchmove‘，function（e）{

e.preventDefault（）//在DIV内阻止滚动

}，false）

touchsurface.addEventListener（‘touchend‘，function（e）{

var touchobj = e.changedTouches [0]

distX = touchobj.pageX - startX //在接触表面时手指移动水平dist

distY = touchobj.pageY - startY //在接触表面时手指移动垂直dist

elapsedTime = new Date（）。getTime（） - startTime //经过时间

if（elapsedTime <= allowedTime）{//满足awipe的第一个条件

if（Math.abs（distX）> = threshold && Math.abs（distY）<= restraint）{//水平滑动的第二个条件遇到

swipedir =（distX <0）？‘left‘：‘right‘//如果dist行进是负数，则表示左滑动

}

否则if（Math.abs（distY）> = threshold && Math.abs（distX）<= restraint）{//垂直滑动的第二个条件遇到

swipedir =（distY <0）？‘up‘：‘down‘//如果dist旅行是负面的，它表示向上滑动

}

handleswipe（swipedir）

e.preventDefault（）

}，false）

}

//用法：

/ *

var el = document.getElementById（‘someel‘）

swipedetect（el，function（swipedir）{

swipedir包含“none”，“left”，“right”，“top”或“down”

if（swipedir ==‘left‘）

警报（‘你刚刚向左滑！‘）

}）

* /

swipedetect()接受两个参数，即将触摸事件绑定到的元素，以及在滑动发生时执行的函数。函数参数“ swipedir”告诉您刚刚使用五个可能值进行的滑动类型：“ none ”，“ left ”，“ right ”，“ top ”或“ down ”。

下面使用该swipedetect()功能显示“左”，“右”，“顶部”或“向下”背景图像（覆盖在默认背景图像的顶部），具体取决于刚刚发生的滑动：

使用的代码是：

五

window.addEventListener（‘load‘，function（）{

var el = document.getElementById（‘touchsurface2‘）

var inner = document.getElementById（‘inner‘）

var hidetimer = null

swipedetect（el，function（swipedir）{

if（swipedir！=‘none‘）{

clearTimeout（hidetimer）

var bgimage = swipedir +‘arrow.png‘//命名约定是“leftarrow.png”，“rightarrow.png”等

inner.style.background =‘透明网址（‘+ bgimage +‘）中心无重复‘

hidetimer = setTimeout（function（）{// 1秒后重置背景图像

inner.style.background =‘‘

}，1000）

}

}）

}，false）

HTML标记是：

五

<div id =“touchsurface2”>

<div id =“inner”>

刷我

</ DIV>

</ DIV>

我们绑定swipedetect()到“ #touchsurface2”，每当在其中发生有效的滑动时，我们相应地更改“ #inner”DIV的背景图像以反映刚刚发生的滑动类型。

原文地址：https://www.cnblogs.com/xjsp/p/9712357.html

时间： 2024-10-04 04:56:25

使用触摸检测滑动（左，右，上或下）的相关文章

js实现Mac触摸板双指事件（上/下/左/右/放大/缩小）

前言这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用. 目标获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上.下.左.右.放大.缩小). 难点双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手. 双指特性 1.在快

appium实现app上、下、左、右滑动操作

1. swipe方法语法 swipe(self, start_x, start_y, end_x, end_y, duration=None): 参数 - start_x - 开始滑动的x坐标 - start_y - 开始滑动的y坐标 - end_x - 结束点x坐标 - end_y - 结束点y坐标 - duration - 持续时间,单位毫秒 2. 手机坐标: 手机从左上角开始为0,横着的是x轴,竖着的是y轴 3. 获取屏幕的size size = driver.get_window_siz

ios 仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View.

仿新浪微博 UINavigationController 向左滑动时显示上一个控制器的View. 实现原理,UINavigationController 的 self.view显示时把当前显示的view截图下来,保存到一个数组中.当push一个view时把上一个view的截图放到self.view后面,当self.view向右拖动时显示上一个view. NavigationController.m #import "NavigationController.h" @interface

在一个每一行从左到右递增每一列从上到下递增的二维数组中查找一个整数是否存在——3

给定一个二维数组,数组的特点是:每一行从左到右数据大小依次递增,每一列数据从上到下依次递增,要求判断一个整数是否在这个二维数组中: 设计二维数组如下: 首先,毋庸置疑的的是,遍历一遍数组肯定能判断出来,这也是最笨的方法了,因此,要想提高程序的运行效率就得找出一种高效的方法来查找: 一开始的想法大概都能想到从数组第一行第一列的数开始沿着对角线判断,如果是对角线数据就可以直接返回,比如我们要想查找17这个数,这时候17比0.9.16都要大,因此以0.9.16为对角线的矩形数据就可以排除了,接下来判断

在Button上、下、左、右位置添加图片和文字

转载请注明出处:http://blog.csdn.net/droyon/article/details/37564419 很多人有如标题所述的需求,而且大多数人采用了自定义组件解决了需求,其实还可以有更"懒"的方法. 1.先附效果图: 2.方案. 首先,Activity.java public class MainActivityTest extends Activity{ @Override protected void onCreate(Bundle savedInstanceSt

在一个二维数组中，每一行都从左到右递增，每一列都从上到下递增，在这样一个数组里查找一个数

第一种: 思路: 二维数组是从左到右递增,从上到下递增,row为行数,col为列数,a[row-1][col-1]为最大数,如果剔除这一行,这一列,则最大数为a[row-2][col-2],如果要查找的num大于a[row-2][col-2]并且大于a[row-1][col-1],则在该row-1行和col-1列查找,照这样遍历. 这样太麻烦,效率太低,应当舍弃. #include<stdio.h> #include<stdlib.h> #include<assert.h&g

16.输入一颗二元树，从上往下按层打印树的每个结点，同一层中按照从左往右的顺序打印

转载请注明出处:http://www.cnblogs.com/wuzetiandaren/p/4261605.html 声明:现大部分文章为寻找问题时在网上相互转载,此博是为自己做个记录记录,方便自己也方便有类似问题的朋友,本文的思想也许有所借鉴,但源码均为本人实现,如有侵权,请发邮件表明文章和原出处地址,我一定在文章中注明.谢谢. 题目:输入一颗二元树,从上往下按层打印树的每个结点,同一层中按照从左往右的顺序打印. 题目分析:可以用一个LinkedList的数据结构模拟队列来完成此操作.传入树

从左到右，从上到下，按某个字段编号工具，免费软件

从左到右,从上到下,按某个字段编号工具,免费软件,支持arcgis10.0,10.1,10.2,如果arcgis9.3,9.2,请你走远点,我们不是一个时代人下载地址:http://files.cnblogs.com/gisoracle/bhtool.zip

地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动，每一次只能向左，右，上，下四个方向移动一格，但是不能进入行坐标和列坐标的数位之和大于k的格子。例如，当k为18时，机器人能够进入方格（35,37），因为3+5+3+7 = 18。但是，它不能进入方格（35,38），因为3+5+3+8 = 19。请问该机器人能够达到多少个格子？

package edu.bjtu.day8_27; import java.util.Scanner; /** * @author Allen * @version 创建时间:2017年8月27日下午7:55:46 * 类说明:链接:https://www.nowcoder.com/questionTerminal/6e5207314b5241fb83f2329e89fdecc8 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格, 但