hammer用法 jquery.hammer.js - 360qq

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 + "█<br/>";
                                                    if (e[a] instanceof Object) {

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

                                                }
            });

 

层里获取到的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