在 html 文件之间滑动手势答案

【问题标题】：Swipe gesture between html files在 html 文件之间滑动手势
【发布时间】：2013-01-17 20:21:02
【问题描述】：

我想将滑动手势集成到整个网页。触发器将是整个包装器 div，目标将是另一个 html 文件。在每个 html 上，我想为左右滑动设置 html 链接。无需上下。

我见过 jQuery 移动开发，但运气不好 :(

【问题讨论】：

您需要使用 ajax 加载新页面，然后从一个到另一个进行动画处理。
谢谢，我会研究这个的。

标签： jquery html css mobile swipe

【解决方案1】：

不确定我是否为时已晚，但要回答您必须执行以下操作：

通过 ajax 将每个 html 页面加载到特定的 div 中。 jQuery $.ajax() 效果很好
使用SwipeJS，您可以在 $.ajax 加载所有内容后启动滑动动画。

真的不需要重新制作滑动功能，SwipeJS 很棒。确保您使用 SwipeJS html 结构并仅加载到每个可滑动的 div 中。希望得到答复。

【讨论】：

【解决方案2】：

这是我用于某些应用程序的触摸屏拖动/滑动修复。

(function(b)
{
b.support.touch = "ontouchend" in document;
if (!b.support.touch)
{
    return;
}
var c = b.ui.mouse.prototype,
    e = c._mouseInit,
    a;
function d(g, h)
{
    if (g.originalEvent.touches.length > 1)
    {
        return;
    }
    g.preventDefault();
    var i = g.originalEvent.changedTouches[0],
        f = document.createEvent("MouseEvents");
    f.initMouseEvent(h, true, true, window, 1, i.screenX, i.screenY, i.clientX, i.clientY, false, false, false, false, 0, null);
    g.target.dispatchEvent(f);
}
c._touchStart = function(g)
{
    var f = this;
    if (a || !f._mouseCapture(g.originalEvent.changedTouches[0]))
    {
        return;
    }
    a = true;
    f._touchMoved = false;
    d(g, "mouseover");
    d(g, "mousemove");
    d(g, "mousedown");
};
c._touchMove = function(f)
{
    if (!a)
    {
        return;
    }
    this._touchMoved = true;
    d(f, "mousemove");
};
c._touchEnd = function(f)
{
    if (!a)
    {
        return;
    }
    d(f, "mouseup");
    d(f, "mouseout");
    if (!this._touchMoved)
    {
        d(f, "click");
    }
    a = false;
};
c._mouseInit = function()
{
    var f = this;
    f.element.bind("touchstart", b.proxy(f, "_touchStart")).bind("touchmove", b.proxy(f, "_touchMove")).bind("touchend", b.proxy(f, "_touchEnd"));
    e.call(f);
};
})(jQuery);

正如 Kevin 所写，您可以使用 ajax 加载您需要准备好的另外两个页面，然后使用滑动触发器对它们进行动画处理。

【讨论】：