Maison > Article > interface Web > Analyse du principe de l'écran tactile javascript de l'action gestuelle du téléphone mobile

Analyse du principe de l'écran tactile javascript de l'action gestuelle du téléphone mobile

黄舟original: 2017-02-11 14:22:521386parcourir

Nous avons déjà réalisé de nombreux effets spéciaux sur écran tactile, nous allons donc aujourd'hui analyser le principe de l'écran tactile de js.

Analyse du principe de lécran tactile javascript de laction gestuelle du téléphone mobile

Illustrons aujourd'hui avec un exemple. Lors de l'implémentation de l'écran tactile, nous devons utiliser addEventListener de js, puis ajouter
touchstart, touchmove, touchend. Aujourd'hui, nous avons ajouté jquery à notre code, juste pour obtenir l'ID et le CSS Haha, après tout, tout le monde dans JQ l'utilise. Mais pour ajouter des événements, vous devez toujours utiliser le document, le mode getElementById, car cette chose n'est disponible qu'en JS, et
TOUCH n'existe pas en JQUERY.

Analyse du principe de lécran tactile javascript de laction gestuelle du téléphone mobile

Comme vous pouvez le voir, il y a cette phrase dans le code, e.preventDefault(). Si vous n'écrivez pas cette phrase, lorsque vous touchez l'écran, le message apparaît. la page glissera, donc son effet est énorme. . .

Que signifie e.touches[0] ? C'est le premier geste, considérons-le comme du toucher. Il y a d'autres gestes à deux doigts sur l'écran tactile. Apprenons-en un aujourd'hui, hehe. . .

Nous obtenons les positions de l'écran tactile gauche, supérieur et manuel de l'objet. À ce moment, le démarrage tactile est terminé. . .

Analyse du principe de lécran tactile javascript de laction gestuelle du téléphone mobile

Notre isdrag est utilisé pour déterminer s'il peut être déplacé. La position après avoir glissé à la main plus la position de l'objet moins la position lorsque le toucher est obtenu. peut être obtenu. De cette façon, nous avons terminé le processus touchmove. .

Pour touchend, nous écrivons ifdrag=false, ce qui signifie plus de glisser. . .

Code de démonstration

<!DOCTYPE>
<html> 
<head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="MobileOptimized" content="320"/>
<title>触屏特效,手机网页</title>
<style type="text/css">
    html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}    
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}    
    .dragme{background:#000;
    width:60px;height:60px; 
    color:#fff; position:absolute; left:40px; top:40px; text-align:center; line-height:60px;}   
</style>   
<script type="text/javascript" src=" 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>   
<body>   
<div id="moveid" class="dragme"> 
    lvtao.net</div> <script type="text/javascript"> var isdrag=false;   
var tx,x,ty,y;    
$(function(){   
    document.getElementById("moveid").addEventListener(&#39;touchstart&#39;,touchStart);  
    document.getElementById("moveid").addEventListener(&#39;touchmove&#39;,touchMove);	document.getElementById("moveid").addEventListener(&#39;touchend&#39;,function(){  
        isdrag = false;  
    }); 
});function touchStart(e){   
   isdrag = true; 
   e.preventDefault();
   tx = parseInt($("#moveid").css(&#39;left&#39;));    
   ty = parseInt($("#moveid").css(&#39;top&#39;));  
   x = e.touches[0].pageX;
   y = e.touches[0].pageY;  
}   
function touchMove(e){   
  if (isdrag){
   e.preventDefault();	   var n = tx + e.touches[0].pageX - x;	   var h = ty + e.touches[0].pageY - y;   
	   $("#moveid").css("left",n); 
	   $("#moveid").css("top",h);    
   }  
}    
</script> </body></html>

Ce qui précède est l'analyse du principe javascript de l'écran tactile d'action gestuelle du téléphone mobile Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. php.cn) !

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：moteur de modèle javascript artTemplateArticle suivant：moteur de modèle javascript artTemplate

Articles Liés

Voir plus