在html文件之间滑动手势

时间:2013-01-17 20:21:03

标签: jquery html css mobile swipe

我想将滑动手势整合到整个网页。触发器将是整个包装器div,目标将是另一个html文件。在每个html我想设置html链接左右滑动。没有必要上下。

我见过jQuery移动开发,但没有运气:(

2 个答案:

答案 0 :(得分:1)

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

(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);

正如凯文写的那样,你可以使用ajax加载你准备好的其他两个页面,然后使用滑动触发器将它们设置为随机播放。

答案 1 :(得分:1)

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

  1. 通过ajax将每个html页面加载到某些div中。 jQuery $.ajax()诀窍就好了
  2. 使用SwipeJS,您可以在$ .ajax加载所有内容后启动滑动动画。
  3. 确实没有必要重新制作滑动功能,SwipeJS很棒。确保使用SwipeJS html结构并加载到每个可滑动的div中。希望得到答复。