如何在没有任何库的情况下使用 jquery 滑动? [英] How to use jquery swipe without any library?

问题描述

我需要使用核心 jQuery 创建 jQuery mobile，如滑动手势 $("#slider ul li div").swipeleft(); 使用核心 jQuery，而不使用任何库或插件，甚至 jQuery mobile.>

我知道 jQuery 移动小部件现在将被解耦，以便我们可以单独使用它.但我等不了那么久了.

I need to create jQuery mobile like Swipe gestures $("#slider ul li div").swipeleft(); using core jQuery without using any library or plugins not even jQuery mobile.

我需要一些类似于左右滑动功能的滑动手势的手动 jQuery 代码.我看过这个，但我不明白如何从中获得滑动手势.任何人都可以帮助我解决该代码吗?

I know that jQuery mobile widgets are now going to be decoupled, so that we can take swipe alone from it. But I can't wait for that long.

推荐答案

这是使用 javascript 进行触摸滑动的代码.最后，我通过在互联网上搜索发现很难.感谢 padilicious.以下是滑块的 HTML 代码.

解决方案

This is the code for touch swipe using javascript. Finally I found it hard by searching all over the internet. Thanks to padilicious.Below is the HTML code for slider.

以下是触摸滑动的 javascript 代码.有点长.但它对我有用.您无需更改任何内容.唯一需要更改的地方是 processingRoutine() 函数.我已经调用了 2 个幻灯片功能，即之前的 &接下来使用此代码 sliders.goToNext() &sliders.goToPrev().你可以随意修改..

Below is the javascript code for the touch swipe. It's bit long. But it works for me. You don't have to change anything. Only place you have to change is processingRoutine() function. I've called 2 slide function i.e previous & next using this code sliders.goToNext() & sliders.goToPrev(). You can modify as you want..

var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;

// The 4 Touch Event Handlers

// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');"  ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">

function touchStart(event,passedName) {
    // disable the standard ability to select the touched object
    event.preventDefault();
    // get the total number of fingers touching the screen
    fingerCount = event.touches.length;
    // since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
    // check that only one finger was used
    if ( fingerCount == 1 ) {
        // get the coordinates of the touch
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
        // store the triggering element ID
        triggerElementID = passedName;
    } else {
        // more than one finger touched so cancel
        touchCancel(event);
    }
}

function touchMove(event) {
    event.preventDefault();
    if ( event.touches.length == 1 ) {
        curX = event.touches[0].pageX;
        curY = event.touches[0].pageY;
    } else {
        touchCancel(event);
    }
}

function touchEnd(event) {
    event.preventDefault();
    // check to see if more than one finger was used and that there is an ending coordinate
    if ( fingerCount == 1 && curX != 0 ) {
        // use the Distance Formula to determine the length of the swipe
        swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
        // if the user swiped more than the minimum length, perform the appropriate action
        if ( swipeLength >= minLength ) {
            caluculateAngle();
            determineSwipeDirection();
            processingRoutine();
            touchCancel(event); // reset the variables
        } else {
            touchCancel(event);
        }   
    } else {
        touchCancel(event);
    }
}

function touchCancel(event) {
    // reset the variables back to default values
    fingerCount = 0;
    startX = 0;
    startY = 0;
    curX = 0;
    curY = 0;
    deltaX = 0;
    deltaY = 0;
    horzDiff = 0;
    vertDiff = 0;
    swipeLength = 0;
    swipeAngle = null;
    swipeDirection = null;
    triggerElementID = null;
}

function caluculateAngle() {
    var X = startX-curX;
    var Y = curY-startY;
    var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
    var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
    swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
    if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); }
}

function determineSwipeDirection() {

    if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
        swipeDirection = 'left';
    } else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
        swipeDirection = 'right';
    } else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
        swipeDirection = 'down';
    } else {
        swipeDirection = 'up';
    }
}

function processingRoutine() {
    var swipedElement = document.getElementById(triggerElementID);
    if ( swipeDirection == 'left' ) {
        sliders.goToNext();         
    } else if ( swipeDirection == 'right' ) {
        sliders.goToPrev();
    } else if ( swipeDirection == 'up' ) {
        sliders.goToPrev();         
    } else if ( swipeDirection == 'down' ) {
        sliders.goToNext();         
    }
}

这篇关于如何在没有任何库的情况下使用 jquery 滑动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！