Maison >interface Web >Tutoriel H5 >L'événement tactile html5 permet de glisser de haut en bas sur la page de l'écran tactile (1) _ compétences du didacticiel html5

L'événement tactile html5 permet de glisser de haut en bas sur la page de l'écran tactile (1) _ compétences du didacticiel html5

WBOYoriginal: 2016-05-16 15:51:362278parcourir

Le récent projet d'application sur lequel je travaillais a causé beaucoup de problèmes en raison de l'utilisation de overflow: Hidden, j'ai donc décidé d'étudier l'événement tactile de HTML5. Il est difficile de trouver un article complet. Bien qu'il existe de nombreux articles sur HTML5 Touch, la plupart d'entre eux présentent des événements tactiles ou de très courtes démos.
Une petite démo relativement complète de glissement de haut en bas, le code est relativement simple.

Ce qui suit est le code complet. J'ai marqué plusieurs endroits importants en rouge

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html lang="fr" >
<tête>
<meta charset="UTF- 8">
<méta nom="portée" content="width=device-width,initial-scale=1 user-scalable=0" />
<titre>29/04/2014titre>
<style>
* {marge : 0 ; remplissage : 0;}
#outer{ width:90%; hauteur : 490 px ; arrière-plan : #000 ; marge : auto ; débordement : caché ;}
#inner{width:80%; hauteur : 2 000 px ; arrière-plan : #f67d42 ; marge : auto ; position : relative ; haut : 0 ; }
style>
<script src='jquery- 1.9.1.min.js'>script>
tête>
<corps>
<div id="spText" >div>
<div id="extérieur" >
<div id="intérieur" >
123 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr hrh 5 ans 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk 123 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr hrh 5 ans 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk
div>
div>
<script>
var startX, //Coordonnées au toucher
startY,
x, //distance de glissement
y,
aboveY=0 //Définissez une variable globale pour enregistrer la position du dernier bloc interne.
var inner=document.getElementById("inner");
fonction touchSatrt(e){//touch
e.preventDefault();
var
=e.touches[0] 🎜>
fonction touchMove(e){//Slide e.preventDefault();
var
=
.touches[0];
y
toucher.pageY - startY;//Distance de glissement //inner.style.webkitTransform
'translate(' 0 'px, ' y 'px )'; //Vous pouvez également utiliser css3. inner.style.top=
y "px" //Au-dessus de cette phrase est Le ; position de l'intérieur après la dernière diapositive }
fonction touchEnd(e){//Le doigt quitte l'écran
e.preventDefault();
aboveY=parseInt(inner.style.top);//Enregistrez le curseur interne après le toucher est terminé La position glissante est reflétée dans la variable globale et doit être convertie en un entier à l'aide de parseInt();
}//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
>
corps>
>
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Texte original : http://www.cnblogs.com/leinov/p/3701951.html

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Premiers pas avec HTML5 Canvas (2) - Compétences du didacticiel Path_html5Article suivant：Premiers pas avec HTML5 Canvas (2) - Compétences du didacticiel Path_html5

Articles Liés

Voir plus