집 > 기사 > 웹 프론트엔드 > 자바스크립트 휴대폰 제스처 액션 터치 터치스크린 원리 분석

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

黄舟원래의: 2017-02-11 14:22:521343검색

이전에 터치스크린 특수효과를 많이 해봤으니 오늘은 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)를 참고하세요. )!

성명：

이전 기사：자바스크립트 템플릿 엔진 artTemplate다음 기사：자바스크립트 템플릿 엔진 artTemplate

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

관련 기사