Heim > Artikel > Web-Frontend > Analyse des Touchscreen-Prinzips von Javascript-Handy-Gestenaktionen

Analyse des Touchscreen-Prinzips von Javascript-Handy-Gestenaktionen

黄舟Original: 2017-02-11 14:22:521380Durchsuche

Wir haben schon viele Touchscreen-Spezialeffekte gemacht, deshalb werden wir heute das Touchscreen-Prinzip von js analysieren.

Lassen Sie uns das heute anhand eines Beispiels veranschaulichen. Bei der Implementierung des Touchscreens müssen wir den addEventListener von js verwenden und dann
touchstart, touchmove, touchend hinzufügen. Heute haben wir JQuery zu unserem Code hinzugefügt, nur um die ID und das CSS zu erhalten. Haha, schließlich verwendet es jeder in JQ. Zum Hinzufügen von Ereignissen müssen Sie jedoch immer noch den getElementById-Modus für Dokumente verwenden, da dieses Ding nur in JS verfügbar ist und es in JQUERY kein
TOUCH gibt.

Analyse des Touchscreen-Prinzips von Javascript-Handy-Gestenaktionen

Wie Sie sehen können, gibt es diesen Satz im Code, e.preventDefault(). Wenn Sie diesen Satz nicht schreiben, wird der Die Seite wird verschoben, daher ist die Wirkung enorm. . .

Was bedeutet e.touches[0]? Es ist die erste Geste, stellen wir uns das als Berührung vor. Es gibt noch andere Zwei-Finger-Gesten auf dem Touchscreen. Lasst uns heute eine lernen, hehe. . .

Wir ermitteln die linke, obere und Touchscreen-Position des Objekts. Zu diesem Zeitpunkt ist der Touchstart abgeschlossen. . .

Analyse des Touchscreen-Prinzips von Javascript-Handy-Gestenaktionen

Unser isdrag wird verwendet, um zu bestimmen, ob es gezogen werden kann. Die Position nach dem Ziehen von Hand plus die Position des Objekts abzüglich der Position beim Touchstart wird erhalten Auf diese Weise haben wir den Touchmove-Prozess abgeschlossen. .

Für Touchend schreiben wir ifdrag=false, was bedeutet, dass kein Ziehen mehr erforderlich ist. . .

Demo-Code

<!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>

Das Obige ist die Analyse des JavaScript-Handy-Gesten-Aktions-Touchscreen-Prinzips. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Javascript-Vorlagen-Engine artTemplateNächster Artikel：Javascript-Vorlagen-Engine artTemplate

In Verbindung stehende Artikel

Mehr sehen