자바스크립트 휴대폰 제스처 액션 터치 터치스크린 원리 분석-JS 튜토리얼-php.cn

자바스크립트 휴대폰 제스처 액션 터치 터치스크린 원리 분석

黄舟

풀어 주다： 2017-02-11 14:22:52

원래의

1342명이 탐색했습니다.

이전에 터치스크린 특수효과를 많이 해봤으니 오늘은 js의 터치스크린 원리를 분석해보겠습니다.

자바스크립트 휴대폰 제스처 액션 터치 터치스크린 원리 분석

오늘은 예를 들어 설명해 보겠습니다. 터치스크린을 구현하려면 js의 addEventListener를 사용한 뒤
touchstart, touchmove, touchend를 추가해야 합니다. 오늘 우리는 ID와 CSS를 얻기 위해 코드에 jquery를 추가했습니다. 하하, 결국 JQ의 모든 사람들이 그것을 사용하고 있습니다. 하지만 이벤트를 추가하려면 여전히 문서 getElementById 모드를 사용해야 합니다. 왜냐하면 이 모드는 JS에서만 사용할 수 있고 JQUERY에는
TOUCH와 같은 기능이 없기 때문입니다.

자바스크립트 휴대폰 제스처 액션 터치 터치스크린 원리 분석

보시다시피 e.preventDefault()라는 문장이 있는데, 이 문장을 쓰지 않으면 화면을 터치하면 페이지가 슬라이드되므로 그 효과는 엄청납니다. . .

e.touches[0]이 무슨 뜻인가요? 첫 번째 제스처인데, 터치스크린에 다른 두 손가락 제스처도 있다고 생각해보자. . .

오브젝트의 왼쪽, 위쪽, 터치스크린 위치를 획득하면 터치스타트가 완료됩니다. . .

자바스크립트 휴대폰 제스처 액션 터치 터치스크린 원리 분석

손으로 드래그한 후의 위치에 터치시작을 얻을 때의 위치를 뺀 위치를 isdrag로 결정합니다. 이런 식으로 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>

로그인 후 복사

위는 자바스크립트 휴대폰 제스처 동작 터치 터치스크린 원리에 대한 분석입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!