<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TouchIt Demo</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,height=device-height,width=device-width,user-scalable = no">
<script src="./jquery-2.0.3.js" type="text/javascript"></script>
<script src="http://glyde.eu/touchit-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#touch" ).touchit({
onTouchStart: function (x, y) {
$("#touched").text('Touch Start ' + x + ':' + y);
},
onTouchMove: function (x, y) {
$("#touched").text("Touch Move " + x + ':' + y);
},
onTouchEnd: function (x, y) {
$("#touched").text("Touch End " + x + ':' + y);
},
onDoubleTap: function (x, y) {
$("#touched").text("Double Tap " + x + ':' + y);
},
onPinch: function (scale) {
$("#touched").text("Pinch " + scale);
}
});
});
</script>
</head>
<body style="margin:0px;">
<span id="touched" style="width:10px;height:10px; ">Touch and pinch the blue square...</span>
<div id="touch" style="width:250px;height:250px;background: blue; "></div>
</body>
</html>
本文介绍了一个使用TouchIt插件实现触摸事件响应的HTML页面示例。该示例通过jQuery库加载了TouchIt插件，并为一个蓝色方块元素绑定了触摸开始、移动、结束、双击及捏合缩放等事件处理器。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
