Maison >interface Web >Tutoriel H5 >L'événement tactile html5 réalise le glissement de haut en bas de la page de l'écran tactile (2) _ compétences du didacticiel html5

L'événement tactile html5 réalise le glissement de haut en bas de la page de l'écran tactile (2) _ compétences du didacticiel html5

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

L'article précédent utilisait l'événement tactile html5 pour créer un effet de glissement simple, obtenant l'effet d'un glissement continu de la page de haut en bas. Reportez-vous à l'article précédent et codez l'événement tactile html5 pour réaliser le glissement de haut en bas de l'écran tactile. page (1)

Cet article produit principalement un effet : lorsque la page glisse vers le haut ou vers le bas, elle ne peut pas continuer à glisser

Étant donné que l'événement tactile est ajouté à la page, les attributs par défaut d'origine des autres pages, tels que les barres de défilement, ne seront pas modifiés. La démo de l'article précédent peut glisser vers le haut ou vers le bas à tout moment, mais la réalité est la suivante. n'est pas conseillé

Code complet :

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>2014-5-4titre>
<style>
* {marge : 0 ; remplissage : 0;}
#outer{ width:90%; hauteur : 490 px ; arrière-plan : #000 ; marge : auto ; débordement : caché ;}
#inner{width:80%; arrière-plan : #e4e4e4 ; marge : auto ; position : relative ; haut :0px ; taille de la police : 1 em ; remplissage : 30 px 10 px ; }
#inner p{line-height: 30px; espacement des lettres : 3 px ; texte-indent:2em;}
#spText{ hauteur : 40 px ; largeur : 100 %;bordure:1px rouge uni;}
h2{ largeur : 100 % ; text-align : centre ; }
h3{ largeur : 100 % ; rembourrage à gauche : 60 % ;}
style>
<script src='http : //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>script>
tête>
<corps>
<div id="spText" >div>
<div id="spText2" >div>
<div id="extérieur" >
<div id="intérieur" >
<h2>背影h2>
<h3>—朱自清h3>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。[1-2]
那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说："事已如此，不必难过，好在天无绝人之路！"[1 -2]
回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。[1-2]
到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。Je lui ai conseillé à plusieurs reprises de ne pas y aller ; il a juste dit : "Ce n'est pas grave, ce n'est pas bien pour eux d'y aller !"

div>

var startX, //Coordonnées au toucher

startY,

x, //distance de glissement

aboveY=0 ; // Définit une variable globale pour enregistrer la position du dernier bloc interne.

var documentHeight=$("#inner").height();//La hauteur du module coulissant interne

var wapperHeight=$("#outer").height(); //Hauteur du cadre extérieur

var

inner=document.getElementById("inner");

fonction touchStart(e){//Touch start

e.preventDefault();

var

touch

=e.touches[0] 🎜>

}

fonction touchMove(e){//Slide

e.preventDefault();

var touch = e.touches[0];

document.getElementById("spText").innerHTML=inner.style.top

fonction touchEnd(e){//Le doigt quitte l'écran

La position de glissement est reflétée dans la variable globale et doit être convertie en un entier à l'aide de parseInt();

if(y>0&

0){//Ne peut pas être utilisé lors du glissement vers le top Swipe en ligne

inner.style.top

$("#inner").animate({top:0},200);

ci-dessusY=0;

if(y0 // inner.style.top

$("#inner").animate({top:-(documentHeight-wapperHeight)},200).animate({top:-(documentHeight-wapperHeight)},200); aboveY

}//
document.getElementById("outer").addEventListener('touchstart', touchStart,false); document.getElementById("outer").addEventListener('touchmove', touchMove,false); document.getElementById("outer").addEventListener('touchend', touchEnd,false);
script>
body>
html>
上面是demo的完整程式碼，這次使用的jquery，因為用到了animate 可以讓滑動到最上面和最下面有點彈性以下是demo效果，你也可以將代碼copy用手機訪問看看，代碼比較簡陋只是實現了效果還沒有考慮到兼容性和健壯性以上就是本文的全部內容，希望對大家的學習有所幫助。原文：
http://www.cnblogs.com/leinov/p/3707197.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 (1) - Concepts de base_html5 Compétences du didacticielArticle suivant：Premiers pas avec HTML5 Canvas (1) - Concepts de base_html5 Compétences du didacticiel

Articles Liés

Voir plus