Android 모 바 일 터치 드 롭 다운 리 셋 기능 구현

첫 번 째 부분:네 개의 터치 이벤트
1.touch start:손가락 을 화면 에 놓 으 면(몇 마리 든)touch start 사건 이 발생 합 니 다.
2.touch move:우리 가 손가락 으로 화면 을 미 끄 러 뜨 릴 때 이 사건 은 연속 으로 발생 합 니 다.페이지 가 미 끄 러 지 는 것 을 원 하지 않 는 다 면 이벤트 의 preventDefault 를 사용 하여 이 기본 행동 을 막 을 수 있 습 니 다.
3.touch end:손가락 이 미 끄 러 진 후에 화면 을 떠 날 때 touch end 사건 이 발생 합 니 다.
4.touch cancel:시스템 이 추적 을 멈 출 때 터치 합 니 다.예 를 들 어 터치 하 는 과정 에서 갑자기 페이지 alert()의 알림 상자 가 발생 합 니 다.이 이 벤트 는 적 게 사 용 됩 니 다.
두 번 째 부분:네 개의 touch 대상
　 1.touches,이것 은 하나의 배열 대상 으로 모든 손가락 정 보 를 포함 하고 한 손가락 만 있다 면 touches[0]로 표시 합 니 다.
　 2. targetTouches 。 손가락 이 목표 구역 에 있 는 손가락 정보.
3.changed Touches:최근 에 이 사건 을 촉발 한 손가락 정보.
4.touch end 시 touches 와 targetTouch 정보 가 삭 제 됩 니 다.changed Touch 가 저장 한 마지막 정 보 는 손가락 정 보 를 계산 하 는 데 사용 하 는 것 이 좋 습 니 다.
세 번 째 부분:인 스 턴 스 1
효과 그림 먼저 보기:

그것 의 실현 원 리 는 매우 간단 하 다.바로 빨간색 원형의 postion 속성 을 absolute 로 설정 한 다음 에 우리 가 그것 을 미 끄 러 뜨 렸 을 때 touch move 사건 을 촉발 시 켰 다.Left 와 top 을 이벤트 의 pageX 와 pageY 로 설정 하면 된다.촉발 중심 과 원심 이 같은 위치 에 있 도록 pageX 에 width 의 절반,pageY 에 height 의 절반 만 더 하면 된다.
원본 코드 는 다음 과 같 습 니 다.


<!DOCTYPE html>
<html>
<head>
 <title>touchExample</title>
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
 <style>
  #touchDiv{
   position: absolute;
   width: 50px;
   height: 50px;
   top: 20px;
   left: 20px;
   text-align: center;
   line-height: 50px;
   color:white;
   border-radius: 50%;
   background-color: red;
  }
 </style>
</head>
<body>
 <div id="touchDiv">  </div>
 <script>
  var touchDiv = document.getElementById("touchDiv");
  var x,y;
  touchDiv.addEventListener("touchstart",canDrag);
  touchDiv.addEventListener("touchmove",drag);
  touchDiv.addEventListener("touchend",nodrag);
  function canDrag (e) {
   console.log("god  ");
  }
  function drag (e) {
   $("#touchDiv").css("left",e.touches[0].pageX-25);
   $("#touchDiv").css("top",e.touches[0].pageY-25);
  }
  function nodrag () {
   console.log("god  ");
  }
 </script>
</body>
</html>

제4 부분:실례 2
이 인 스 턴 스 는 드 롭 다운 리 셋 기능 의 실현 입 니 다.효 과 는 다음 과 같 습 니 다.

원본 코드 는 다음 과 같 습 니 다.


<!DOCTYPE html>
<html>
<head>
 <title>    </title>
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
 <style>
  *{
   margin:0;
   padding: 0;
   font-size:15px;
  }
  .header{
   height: 50px;
   line-height: 50px;
   text-align: center;
   background-color: blue;
   color:white;
   font-size: 23px;
  }
  .drag_to_refresh{
   align-items: center;
   padding-left: 155px;
   background-color: #bbb;
   color:yellow;
   display: none;
  }
  .refresh{
   height: 50px;
   line-height: 50px;
   text-align: center;
   background-color: #bbb;
   color: green;
   display: none;
  }
  .drag{
   text-align: center;
   background-color: lightgray;
   position: relative;
   padding:20px;
   text-indent: 1em;
   line-height: 30px;
   font-size:18px;
  }
 </style>
</head>
<body>
 <div class="header">   </div>
 <div class="drag_to_refresh"></div>
 <div class="refresh">   ...</div>
 <div class="drag">     （E-government cloud）     ，           ，              、  、  ，                           ，              IT    。</div>
<script>
window.onload = function () {
 var initX;
 var drag_content = document.querySelector(".drag");
 var drag_to_refresh = document.querySelector(".drag_to_refresh");
 var refresh = document.querySelector(".refresh");
 drag_content.addEventListener("touchmove",drag);
 drag_content.addEventListener("touchstart",dragStart);
 drag_content.addEventListener("touchend",dragEnd);
 function dragStart(e){
  initY = e.touches[0].pageY;
  console.log(initX);
 }
 function drag (e){
  drag_to_refresh.style.display = "block";
  drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
  console.log(drag_to_refresh.style.height);
  if(parseInt(drag_to_refresh.style.height)>=100){
   //   ：  height     px   ，   parseInt  
   drag_to_refresh.style.height = "100px";
   if(parseInt(drag_to_refresh.style.height)>80){
    drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
    drag_to_refresh.innerHTML = "    ";
   }
  }
 }
 function dragEnd (e){
  if(parseInt(drag_to_refresh.style.height)>80){
   refresh.style.display = "block";
   setTimeout(reload,1000);
  }
  drag_to_refresh.style.display = "none"; 
 }
 function reload () {
  location.reload();
 }
}
</script>
</body>
</html>

위 에서 말 한 것 은 편집장 이 소개 한 모 바 일 터치 가 드 롭 다운 리 셋 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

터치시 빈 파일이 아닌 템플릿에서 생성

touch 명령은 기본적으로 새 파일을 만드는 데 사용됩니다. 그러나 touch 는 빈 파일을 작성하기 때문에 그리 편리하지 않습니다. 예를 들어, license 파일을 프로젝트에 포함시키는 것을 잊었으므로 나중에 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Android 모 바 일 터치 드 롭 다운 리 셋 기능 구현

좋은 웹페이지 즐겨찾기