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");
});
$("#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/>";
}
}
});
$("#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█
|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