hammer用法 jquery.hammer.js

jquery.hammer.js使用时要先引入hammer.min.js

下面代码是滑动效果：

$("#nav").hammer().bind('swiperight', function (e) {
                $("#result").html(e.gesture.deltaX)
                var currPos = $(".menu").scrollLeft();
                var currPos = $(".menu").scrollLeft();
                var p = currPos - e.gesture.deltaX * 3;
                if (p > $("#menu").offset().left) {
                p= $("#menu").offset().left;
                }
                // $("#menu").scrollLeft($("#menu").scrollLeft() - e.gesture.deltaX);
                $("#menu").animate({ scrollLeft: p + "px" }, "slow");
            });

然后在使用！一下是hammer中对应e的参数信息█是一级属性：两端的为2级属性！

比如e的属性有type，gesture

其中gesture的属性有pointers,changedPointers,pointerType 下一个█之前

在手机上输出参数！

没找到在电脑上调试hammer的方法！所以只能在手机上输出到层里面！

$("#nav").hammer().bind('swipeleft', function (e) {
 $("#result").html(e.gesture.deltaX)
 //$("#menu").scrollLeft($("#menu").scrollLeft() - e.gesture.deltaX);
 var currPos = $(".menu").scrollLeft();
 var p = currPos - e.gesture.deltaX * 3;
 if (p <= 0)
 p = 0;
 $("#menu").animate({ scrollLeft: p + "px" }, "slow");

 for (a in e) {
 document.getElementById("result").innerHTML += a + "█ ";
 if (e[a] instanceof Object) {

 for (b in e[a]) {
 document.getElementById("result").innerHTML += b + ": ";
 document.getElementById("result").innerHTML += e[a][b] + " ";
 }
 document.getElementById["result"] += " ";
 }
 else {
 document.getElementById("result").innerHTML += "|" + e[a] + " ";
 }

 }
 });

层里获取到的e参数

type█
|swipeleft
gesture█

pointers:
[object Touch]

changedPointers:
[object Touch]

pointerType:
touch

srcEvent:
[object TouchEvent]

isFirst:
false

isFinal:
true

eventType:
4

center:
[object Object]

timeStamp:
1433406137249

deltaTime:
117

angle:
169.11447294534125

distance:
52.952809179494906

deltaX:
-52
deltaY:
10
offsetDirection:
4
scale:
1
rotation:
0
velocity:
0.9705882352941176
velocityX:
0.9705882352941176
velocityY:
-0.23529411764705882
direction:
2
target:
[object HTMLDivElement]
timeStamp█
|1433406137250
jQuery20009665961118880659█
|true
isTrigger█
|3
namespace█
|
namespace_re█
|null
result█
|undefined
target█
nodeName:
DIV
spellcheck:
true
previousElementSibling:
[object HTMLDivElement]
offsetTop:
0
firstChild:
[object Text]
lastElementChild:
[object HTMLDivElement]
outerText:
aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp
innerHTML:
aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp