javascript – 多点触控登录主页

我想创建一个基于触摸的主页.因此,例如,如果用户用5个手指触摸屏幕,如图像(绿色圆圈,见下文),则会将用户重定向到特定主页,但如果他触摸其他模式(红色圆圈),则会显示“登录失败,再试一次”警报.只要它在广场内,用户触摸的位置无关紧要.

主要想法是确定用户的手指位置并将他重定向到另一个页面,
登录的想法只是一个例子.

有没有办法使用HTML和JavaScript来做到这一点,因为我希望它成为iOS主页？

example layout http://s12.postimage.org/ta0molzvx/touch_example.png

您将需要绑定到您希望用户触摸的元素的触摸事件.这些事件是touchstart,touchmove和touchend(well和touchcancel).在事件中,手指位置的坐标以数组形式给出(实际上是三个 – 参见底部的链接,为哪些数组或数组访问哪些事件/场景).然后,您可以使用这些坐标来计算形状.

以下是使用jquery(非必要)的两个手指的示例.

#JQuery
$('#myID').bind("touchstart", function(event) {
  var finger1PosX = event.originalEvent.targettouches[0].pageX;
  var finger2PosX = event.originalEvent.targettouches[1].pageX;
});

这假设至少按下两个手指,这是一个不好的假设.

这是一个很好的教程/讨论：
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

您可能还想使用event.preventDefault阻止此div中的滚动和其他手势.

另外注意对android上的多点触控事件的支持在版本之间有所不同(我知道你在询问ios).

javascript – 多点触控登录主页

相关文章