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

轉載于:https://www.cnblogs.com/360qq/p/4552254.html

總結

以上是生活随笔為你收集整理的hammer用法 jquery.hammer.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。