我需要创建jQuery mobile,如Swipe gestures $(“#slider ul li div”).swipeleft();使用核心jQuery而不使用任何库或插件甚至jQuery mobile.
我知道jQuery移动小部件现在将被解耦,因此我们可以单独从中轻扫.但我不能等那么久.
我需要一些类似于滑动手势的手动jQuery代码,用于滑动左右功能.
我见过this,但我无法理解如何从中轻扫手势.
任何人都可以帮我解决这个问题吗?
解决方法
这是使用javascript进行触摸滑动的代码.最后,通过互联网搜索我发现很难.感谢
padilicious.Below是滑块的HTML代码.
<div id="slider" ontouchstart="touchStart(event,'slider');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"> <ul id="slideul"><li><img src="1.jpg"></li><li>....</ul> </div>
以下是触摸功能的javascript代码.这有点长.但它对我有用.你不必改变任何东西.只有你必须改变的地方是processingRoutine()函数.我称之为2滑动功能,即前一个&接下来使用此代码sliders.goToNext()& sliders.goToPrev().你可以随意修改..
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(); } }