JavaScript-js配合php实现手势功能

JavaScript-js配合php实现手势功能

甜柠檬 发布于 2017-07-22 字数 261 浏览 1011 回复 3

不知道那位大哥研究过网站上增加一个手写动作的识别
今天看到有个手机浏览器可以手势控制
我想我们是不是能做一个网站内的手势识别
比如手势往前划一下就往前翻一页,往后反之,等等....
希望大家能分享一下设计思路
如果能有实际性的代码就更好了

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

虐人心 2017-10-16 3 楼

我说下思路,首先通过 mousedown事件(A)记录当前鼠标的位置。再得到当前的时间戳。
接着通过mouseup事件(B)再得到当前鼠标的坐标,同样也得到当前的时间戳。

大概逻辑:

定义
移动移动最小像素 p;
最多移动用时 s (毫秒)

计算

移动用时 = 事件(B)得到的时间 - 事件(A)得到的时间

x轴 移动的距离 = abs(事件A x坐标 - 事件B x坐标)
y轴 移动的距离 = abs(事件A y坐标 - 事件B y坐标)

移动方向x: 事件A x坐标 - 事件B x坐标 > 0 初步判断是从右到左r2l 反正l2r
移动方向y: 事件A y坐标 - 事件B y坐标 > 0 初步判断是从下到上d2u 反正u2d

确定移动方向 :

if(x轴 移动的距离 >= p && y轴 移动的距离 >= p) {
if(x轴 移动的距离 > y轴 移动的距离){
确定移动方向 = 移动方向x
}else{
确定移动方向 = 移动方向y
}
}else if(x轴 移动的距离 >= p && y轴 移动的距离 < p) {
确定移动方向 = 移动方向x
}else if(x轴 移动的距离 < p && y轴 移动的距离 >= p){
确定移动方向 = 移动方向y
}else {
//不符合触发事件的条件 移动太距离太短了
}

判断移动用时:

if(移动用时 > s) {
//不符合触发条件 移动太缓慢
return;
}

最终执行:

  switch(确定移动方向) {
case 'r2l' :
//右到左 程序
break;
case 'l2r' :
//左到右 程序
break;
case 'd2u' :
//下到上 程序
break;
case 'u2d' :
//上到下 程序
break;
}

当然这样也只是简单的判断 四个方向的鼠标事件。

瑾兮 2017-09-17 2 楼

说真的,这个有点难度,而且不太现实。首先要监听鼠标的任何动作,算出鼠标运行的轨迹,例如当前为位置(50,20),现在到位置(69,180),这样就是鼠标下划,然后通过Ajax来触发页面的相应动作和服务器交互,这个鼠标移动算法就有点难度。还有一个最蛋疼的就是要解决和有些已经有鼠标手势的浏览器冲突的问题。这个是最难解决的。

泛泛之交 2017-09-05 1 楼

这个问题问的很前沿,现在苹果的产品越来越流行的情况下,人们开始想把手机或平板电脑的东东搬到网站上来。

我给推荐一个在firefox下用的扩展userChromeJS,你可以在网上搜一下它的相关资料。还有一个在线生成js脚本的编辑器:鼠标手势 UserChromeJS 脚本在线生成器

这个在线生成js的编辑器需要在firefox下打开,生成js是否兼容其他浏览器有待你的测试了。目前 js 有了,与 php 进行 ajax 交互我就不说了。