Adobe Edge Mobile图库

时间:2013-02-10 17:15:00

标签: javascript html5 css3 image-gallery adobe-edge

我正在使用Adobe Edge Animate创建我网站的大部分内容,但我也希望制作移动版本,因此显然不是onClick事件,我想使用onTouch事件。我似乎无法找到关于如何使用触摸事件的任何好信息,因为我以前从未使用过它们。

我想创建一个简单的图库,当您向左滑动时向前播放,向右滑动时播放反向。

这里的一个大问题是,如何根据滑动的方向告诉触摸事件做不同的事情?

1 个答案:

答案 0 :(得分:0)

首先,你是对的,你想使用三个事件处理程序:touchstart,touchmove,touchend

您可能采取的一种方法是将用户手指的起始位置与结束位置进行比较。虽然代码会根据您想要检测的手指数量而有所不同,但我将概述您可以适应的基本方法。为了检测一个手指,在“touchstart”事件处理程序中输入以下内容:

var xStart = e.originalEvent.touches[0].pageX;
sym.setVariable('xStart', xStart);

将第一个手指的起始x位置存储在变量中,然后使其可由其他事件处理程序全局访问。 然后可能在“touchend”事件处理程序中执行相同的操作。使用一些逻辑来比较这两个值。

xStart = sym.getVariable('xStart');
var xEnd = e.originalEvent.touches[0].pageX;

if (xEnd > xStart)
{
    sym.playReverse();
}
else if (xEnd < xStart)
{
    sym.play();
}

然后你会有一些停止帧来保存这些图像。

这只是一个例子,但希望它能帮助你开始。 祝你好运!