如何使用jQuery和touchswipe处理Swipe事件

时间:2017-11-07 09:59:27

标签: javascript jquery html touchswipe

plunker demo显示了使用touchswipe库的滑动事件功能。我需要能够在完全滚动页面(水平)后轻扫。(现在它正在滑动,如果你只是用手指移动鼠标/滑动)和我刷完后得到的新页面,应该有整个页面的不同背景颜色。(在给定的演示,它是HtmlPage1.html)任何人都可以帮助我吗?...

<script type="text/javascript">
    var swipeOptions = {
        allowPageScroll :"auto",

    fingers:1,
    swipeLeft:swipeLeft,
    swipeRight: swipeRight
    };
    var threshold = 800;
    $(function()
    {
        imgs = $("#slide1");     
        imgs.swipe(swipeOptions,threshold);
    });
    function swipeStatus(event, phase, direction, distance) {

        debugger;
    }

    function swipeLeft(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {

        $("#x1").text("You Swiped " + event + distance + "_pixels distance " + duration + "_time in units " + fingerCount + fingerData + " in " + currentDirection + " direction");


    }
    function swipeRight(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {

        $("#x1").load("HtmlPage1.html").css('background-color', 'red');
    }

</script>
</head>
<body>
    <div id="slide1">
        <div id="x1">

        </div>   
    </div>

</body>
</html>

我有{strong>更新 Plunker Demo和代码。现在我需要在行

中调用 swipeLeft / swipeRight 方法
alert('Left Reached!');

即。而不是alert(),我需要调用touchswipe的滑动方法.. 如何实现这一功能......任何人都可以帮助我吗?..

var swipeOptions = {
        allowPageScroll :"auto",

    fingers:1,
    swipeLeft:swipeLeft,
    swipeRight: swipeRight
    };
    var threshold = 800;
    $(function()
    {
        imgs = $("#slide1");


        imgs.swipe(swipeOptions,threshold);
        imgs = $("#slide2");
    });

$(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("bottom!");

        }
    });
    $(window).scroll(function () {
                if ($(window).scrollLeft() + $(window).width() == $(document).width()) {
               alert('Left Reached!');
            }
        });

    function swipeStatus(event, phase, direction, distance) {

        debugger;
    }

    function swipeLeft(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {
 window.scrollTo(event.pageX, 0);       
        $("#x1").text("You Swiped " + event + distance + "_pixels distance " + duration + "_time in units " + fingerCount + fingerData + " in " + currentDirection + " direction");


    }
    function swipeRight(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {
      window.scrollTo(-event.pageX, 0);
        $("#x1").load("HtmlPage1.html").css('background-color', 'red');
    }

0 个答案:

没有答案