alloyfinger
Version:
super tiny size multi-touch gestures library for the web.
70 lines (61 loc) • 2.57 kB
HTML
<html>
<head>
<title>Event Test</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
#test {
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-color: green;
}
</style>
</head>
<body style="text-align: center; font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif'; background-color: black; color: white;height: 1000px;">
<div id="test" style="width: 280px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 30px;">Touch Me</div>
<div id="result" style="font-size: 18px;"></div>
<script src="../../alloy_finger.js"></script>
<div>
<script>
var result = document.querySelector("#result"),
testDiv = document.querySelector("#test"),
html = "";
new AlloyFinger(testDiv, {
touchStart: function () {
html = "";
html += "start<br/>";
result.innerHTML = html;
},
touchEnd: function () {
html += "end<br/>";
result.innerHTML = html;
},
tap: function () {
html += "tap<br/>";
result.innerHTML = html;
},
rotate: function (evt) {
html += "rotate [" + evt.angle + "]<br/>";
result.innerHTML = html;
},
pinch: function (evt) {
html += "pinch [" + evt.scale + "]<br/>";
result.innerHTML = html;
},
pressMove: function (evt) {
html += "pressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
result.innerHTML = html;
},
swipe: function (evt) {
html += "swipe [" + evt.direction+"]<br/>";
result.innerHTML = html;
},
twoFingerPressMove: function (evt) {
html += "twoFingerPressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
result.innerHTML = html;
evt.preventDefault();
}
})
</script>
</div>
</body>
</html>