1 <!DOCTYPE html>2 <html>3 <head>4 <title>Deslizar a derecha e izquierda</title>5 <style>6 #miDiv {7 width: 100%;8 height: 100vh;9 background-color: #f0f0f0;10 display: flex;11 justify-content: center;12 align-items: center;13 }14 </style>15 </head>16 <body>17 18 <div id="miDiv">Desliza a la derecha o a la izquierda</div>19 20 <script>21 // Funciones que se llaman al deslizar22 function Derecha() {23 alert('Deslizado a la derecha');24 }25 26 function Izquierda() {27 alert('Deslizado a la izquierda');28 }29 30 // Elemento que detecta los gestos táctiles31 const elemento = document.getElementById('miDiv');32 33 let puntoInicial, puntoFinal;34 35 // Evento inicial al tocar la pantalla36 elemento.addEventListener('touchstart', function(e) {37 puntoInicial = e.touches[0].clientX;38 }, false);39 40 // Evento final al levantar el dedo de la pantalla41 elemento.addEventListener('touchend', function(e) {42 puntoFinal = e.changedTouches[0].clientX;43 44 // Calcular la dirección del deslizamiento45 if (puntoFinal - puntoInicial > 0) {46 Derecha();47 } else {48 Izquierda();49 }50 }, false);51 </script>52 53 </body>54 </html>55 Enlace
El enlace para compartir es: