javascript - Touchwipe 集成 - 单页站点脚本

Question

我一天中的大部分时间都在进行故障排除并寻找有关 TouchWipe ( http://www.netcu.de/jquery-touchwipe-iphone-ipad-library) 集成到这个基于视差的自定义单页站点脚本 (http://www.joerg-niemann.de/blog/up-down-left-right-scrolling-single-page-website/) 的问题的答案，这正是我正在寻找我的最新项目。

脚本本身可以完成我想要的一切，漂亮的过渡和开箱即用的键盘控制，但我终究无法掌握如何集成 TouchWipe。

我们的想法是，访问 iOS 的用户应该能够像点击导航箭头或使用键盘一样轻松地用手指在页面之间删除/滑动/滑动。

我的问题是无法尝试为 TouchWipe 手势调用与单击箭头或使用键盘相同的函数。脚本的点击函数调用部分如下所示:

        function setRight(page, text) {
            $("#rightText").text(text);
            $("#rightControl").show().unbind('click').click(function () {
                parallax[page].right();
            });
            rightKey = function () {
                parallax[page].right();
            };
        } 

我绝不是 JavaScript 开发人员，而且由于我一直无法在任何地方找到关于如何将触摸与这个可爱的脚本集成的合适答案(我为使用没有常见问题解答的自定义脚本而感到羞耻)，我正在联系你。

我尝试了多种不同的方式来调用删除/滑动/触摸时的必要功能，但都无法正常工作。我一辈子都弄不明白为什么这行不通:

<script>
    $(document).ready(function(){
        $('body').touchwipe({
            wipeLeft: function(){ parallax[page].left(); },
            wipeRight: function(){ parallax[page].right(); },
            wipeUp: function(){ parallax[page].top(); },
            wipeDown: function(){ parallax[page].bottom(); }
        })
    })
</script>

我希望我已经说清楚了，否则请随时批评我，如果需要，我会提供更多信息。我确信有一个简单的解释可以解释为什么它没有按照我希望的方式运行，但我似乎无法弄明白。

Answer 1

我终于想出了如何使用 Parallax.js 实现 TouchWipe 脚本。

以下是对 future 遇到此问题的任何人的回答:

<script>
    $(document).ready(function(){
        $('#index').touchwipe({
            wipeLeft: function(){ $(".control").hide(); parallax.right.right(); },
            wipeRight: function(){ $(".control").hide(); parallax.left.left(); },
            wipeUp: function(){  $(".control").hide(); parallax.top.top();  },
            preventDefaultEvents: true
        });

        $('#right').touchwipe({
            wipeRight: function(){ $(".control").hide(); parallax.index.left(); },
            preventDefaultEvents: true
        })


        $('#left').touchwipe({
            wipeLeft: function(){ $(".control").hide(); parallax.index.right(); },
            preventDefaultEvents: true
        })

        $('#top').touchwipe({
            wipeDown: function(){ $(".control").hide(); parallax.index.bottom(); },
            preventDefaultEvents: true
        })

    });        
</script>

原来我不得不分别调用每个函数，为什么，我不知道，但出于某种原因，它不接受在组合函数中调用两个函数。

所以首先，像这样调用隐藏控件的函数(用分号分隔，这样你就可以添加另一个函数):

$(".control").hide();

然后你必须像这样调用过渡和页面更改(最后一个 ID(parallax.xxxx.ID 用于调用你希望新页面从哪一侧滑入 - 正如我使用 TouchWipe 设置网站作为一个网络应用程序，我当然会从对面的网站滑入页面:wipeUp 触发 parallax.top，wipeLeft 触发 parallax.right 等):

parallax.index.bottom();

这是新的、改进的和 kickass jsfiddle: http://jsfiddle.net/Q96uH/2/

在我的堆垛机伙伴们身上写代码!