JavaScript携帯電話ジェスチャーアクションタッチタッチスクリーン原理の分析-jsチュートリアル-php.cn

JavaScript携帯電話ジェスチャーアクションタッチタッチスクリーン原理の分析

黄舟

リリース： 2017-02-11 14:22:52

オリジナル

1398 人が閲覧しました

これまでに多くのタッチスクリーンの特殊効果を作成してきたので、今日は js のタッチスクリーンの原理を分析します。

JavaScript携帯電話ジェスチャーアクションタッチタッチスクリーン原理の分析

今日は例を挙げて説明しましょう。タッチスクリーンを実装するには、js の addEventListener を使用してから、
touchstart、touchmove、touchend を追加する必要があります。今日は、ID と CSS を取得するために、コードに jquery を追加しました。笑、結局のところ、JQ の全員がそれを使用しています。ただし、イベントを追加するには、ドキュメントの getElementById モードを使用する必要があります。これは JS でのみ使用可能であり、JQUERY には
TOUCH などがないためです。

JavaScript携帯電話ジェスチャーアクションタッチタッチスクリーン原理の分析

ご覧のとおり、コード内に e.preventDefault() という文があり、この文を書かないと画面をタッチするとページがスライドしてしまうので、その役割は非常に大きいです。。。

e.touches[0] とはどういう意味ですか?これは最初のジェスチャです。タッチと考えてみましょう。タッチスクリーンには他にも 2 本指のジェスチャがあります。今日はそのジェスチャを学びましょう。。。

オブジェクトの左、上、タッチスクリーンの位置を取得します。この時点でタッチスタートが完了します。。。

JavaScript携帯電話ジェスチャーアクションタッチタッチスクリーン原理の分析

私たちの isdrag は、手でドラッグした後の位置にオブジェクトの位置を加えたものから、touchstart を使用して移動後の位置を取得できるかどうかを判断するために使用されます。以上で touchmove の処理は完了です。。

touchend の場合は、ifdrag=false と記述するだけです。これは、ドラッグが不要になることを意味します。。。

デモコード

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

ログイン後にコピー

上記は、JavaScript 携帯電話のジェスチャアクションタッチタッチスクリーンの原理の分析です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。