L'événement tactile HTML5 réalise l'effet de faire glisser la page de haut en bas [avec le code]
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>
<style>
-
* {marge : 0 ; remplissage : 0;}
#outer{ largeur : 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<br> 123<br> gag<br> af <br> 123<br> 123<br> 123<br> 123<br> 123 <br> 123<br> 123<br> 123<br> 123<br> 123 <br> 123<br> yryyr<br> ryry<br> 123<br> 123 <br> 123<br> 123<br> 123<br> sdff<br> fef <br> 123<br> hr<br> hrh<br> 5 ans<br> 123 <br> er<br> ert<br> 123<br> rgdgdg<br> 123 <br> 123<br> 123<br> 123<br> 123<br> 123 <br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123 <br> 123<br> 123<br> 123<br> gdggdgdg<br> 123 <br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy <br> hjkhjkhkhkhjkhkh<br> kjkjk<br>123<br> 123<br> gag <br> af<br> 123<br> 123<br> 123<br> 123 <br> 123<br> 123<br> 123<br> 123<br> 123 <br> 123<br> 123<br> yryyr<br> ryry<br> 123 <br> 123<br> 123<br> 123<br> 123<br> sdff <br> fef<br> 123<br> hr<br> hrh<br > 5 ans<br> 123< br> er<br> ert<br> 123<br > rgdgdg<br> 123< br> 123<br> 123<br> 123<br > 123<br> 123< br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br > 123<br> 123< br> 123<br> 123<br> 123<br > 123<br> 123< br> 123<br> gdggdgdg<br> 123<br > drgdrgd<br> 123< br> 123<br> 123<br> yuyuyuyuyuy<br > hjkhjkhkhkhjkhkh<br> kjkjk< br>
-
div>
-
div>
-
-
<script>
- var startX,//触摸时的坐标
- startY,
- x, //distance de glissement
- oui,
-
aboveY=0 //Définit une variable globale pour enregistrer la position de la dernière diapositive de bloc interne
-
-
var inner=document.getElementById("inner");
fonction touchSatrt(e){//touch -
e.preventDefault(); -
var -
touch=e.touches[0]
-
startY = touch.pageY //Coordonnées lorsqu'on vient de le toucher
} -
-
fonction touchMove(e){//Slide -
e.preventDefault(); -
var -
touch = e.touches[0]
-
y = toucher.pageY - startY;//Distance de glissement
//-
inner.style.webkitTransform = 'translate(' 0 'px, ' y 'px )'; //Vous pouvez également utiliser la méthode CSS3
-
inner.style.top=aboveY y "px" //Dans cette phrase
} -
-
fonction touchEnd(e){//Le doigt quitte l'écran -
e.preventDefault(); -
-
aboveY=parseInt(inner.style.top);//Enregistrez le curseur interne après le toucher end 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('touchmove', touchMove,false);
- document.getElementById("outer").addEventListener('touchend', touchEnd,false);
script- >
-
corps>
-
html- >
-
L'événement tactile html5 ci-dessus réalise l'effet de glissement de page de haut en bas [avec code] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez Script Home.
Texte original : - http://www.tuicool.com/articles/nIBJju