[💯原]Javascript，我们来用js在网页中识别鼠标手势
觉得点击切换图片这样的方式不潇洒，鼠标手势呢？于是构思了一下识别鼠标手势的问题。自己去实现然后封装成了一个jquery插件。使用简洁。
下载地址：
http://download.csdn.net/download/qddnovo/7187713
先预览一下使用
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Scripts/jMouseGesture.js" type="text/javascript"></script>
<script type="text/javascript">
onload = function () {
$("#content").mousedown(function (e) {
var f = 0;
$(this).jMouseGesture(e, {
"rLine": function () { alert("右");} ,
"lLine": function () { alert("左"); },
"uLine": function () { alert("上"); },
"dLine": function () { alert("下"); },
"nike": function () { alert("Nike钩"); },
"cwRound": function () { alert("顺时针圈"); },
"rcwRound": function () { alert("逆时针圈"); },
"uRight": function () { alert("上右"); },
"uLeft": function () { alert("上左");}
});
});
}
</script>
先看函数的使用
$(“#被点击者”).jMouseGesture(e,{“FunName”:function(){}},isAfterEvent,noSelectWord);
函数是放在mousedown中使用的，因为这样可以让用户自己定义一些点击时要做的其他事情。jMouseGesture中只监视鼠标滑动和抬起时的动作。默认阻止，如果不阻止后面触发页面的抬起事件，可以向isAfterEvent传递false。isAfterEvent默认为true。也就是说在完成鼠标手势函数后还想使用mouseup，mousemove的事件来完成某些动作，则需要传递false。noSelectWord是是否禁止在鼠标滑动的时候选中点击块内的文字，默认为true。
下面我来分析一下我的思路：
1.采集鼠标坐标：识别鼠标手势就是分析坐标。那么需要采集鼠标坐标，但是如果所有经过的点都采集，那么会非常占用内存，所以采用一个定时器，每隔20ms去记录一个坐标点。
2.分析鼠标坐标：
我的思路很简单不复杂。
分析鼠标坐标有很多方法。识别一条直线，数学上我们可以用线性回归。
一元线性回归方程如下：
根据数学公式我们可以得到回归后的方程，这就是最接近真实的那条直线了。根据直线的属性我们可以判断上下左右了。
但是我们不用。因为你知道我想画什麽形状吗。
看到过一篇使用神经网络的方法，就是边读坐标边学习，边分析。需要多次使用才能发挥好效果。很好很强大。
这些方法都是夸张。我的方法是，嗯比喻。
不是每个用户的手都有同样的状态，有的手在左右抖，有的手在上下抖，这都是计算机无法想象的。所以我们只能重新认识一下线条，来比喻……
我们由A点到B点得到A到B的向量在直角坐标系中的角度，并且值域控制在[0,360)。这样我们分析时可以统一的比较每个向量。
比如我是这样分析Nike钩的识别的：
我们来看主要的函数吧。
返回一个包含x，y的坐标对象的函数
function mouseCoords(e) {//兼容的得到鼠标当前坐标
if (e.pageX || e.pageY) {
return { x: e.pageX, y: e.pageY };
}
return {
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
y: e.clientY + document.body.scrollTop - document.body.clientTop
};
}
//该函数由两个点返回A到B点向量的角度
function getAngle(p1, p2) {//由当前点到下一个点这两坐标的[屏幕]标点,返回该向量的角度[0,360)
var x = p2.x - p1.x;
var y = p1.y - p2.y; //屏幕坐标系转为直角坐标系，x,y为1到2的直角坐标系原点向量
var angle = 0;
if (x > 0) {//一,四象限
if (y == 0) {
angle = 0; //一四象限0
}
else if (y > 0) {
angle = Math.atan(y / x) * 180 / Math.PI; //一象限
}
else if (y < 0) {
angle = 360 - Math.atan((-y) / x) * 180 / Math.PI; //四象限
}
}
else if (x < 0) {//二三象限
if (y == 0) {
angle = 180; //二三象限0
}
else if (y > 0) {
angle = 180 - Math.atan(y / (-x)) * 180 / Math.PI; //二象限
}
else if (y < 0) {
angle = Math.atan(y / x) * 180 / Math.PI + 180; //三象限
}
}
else { //x==0时
if (y > 0) {
//90度
angle = 90;
}
else if (y < 0) {
//270度
angle = 270;
}
else {
//(0,0)
angle = undefined;
}
}
return angle;
}
这两个函数就是主要函数，剩下的工作就是分析而已。
唯一要注意的就是，页面上可能会存在事件的冒泡，所以isAfterEvent来控制是否在mouseup后禁止mousedown和mousemove。但是我们的插件使用者可能会在手势识别后继续使用mousedown和mousemove这两个事件。所以传递false就可以在之后继续使用了。
By博客园.小八究.....转请注
