html5 터치 이벤트는 터치 스크린 페이지를 위아래로 슬라이딩하는 것을 실현합니다. (1)

html5 터치 이벤트는 터치 스크린 페이지를 위아래로 슬라이딩하는 것을 실현합니다. (1)_html5 튜토리얼 기술

WBOY

풀어 주다： 2016-05-16 15:51:36

원래의

2277명이 탐색했습니다.

최근 진행하고 있던 앱 프로젝트에서 Overflow:Hidden 사용으로 인해 많은 문제가 발생하여 HTML5의 터치 이벤트에 대해 연구하게 되었습니다. html5 터치에 관한 글은 많지만 대부분 터치 이벤트나 아주 짧은 데모를 소개하고 있습니다.
위아래로 슬라이딩하는 비교적 포괄적인 소규모 데모로, 코드는 비교적 간단합니다.

다음은 전체 코드입니다. 중요한 부분을 빨간색으로 표시했습니다

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html lang="ko" >
<머리>
<메타 문자 집합="UTF- 8">
<메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1 user-scalable=0" />
<제목>2014-4-29제목>
<스타일>
* {여백: 0; 패딩: 0;}
#외부{ 너비:90%; 높이: 490px; 배경: #000; 여백: 자동; 오버플로: hidden;}
#inner{너비:80%; 높이: 2000px; 배경: #f67d42; 여백: 자동; 위치:상대적; 상단:0; }
스타일>
<스크립트 src='jquery- 1.9.1.min.js'>스크립트>
머리>
<몸>
<div id="spText" >div>
<div id="외부" >
<div id="내부" >
123 123 개그 af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 시간 시간 5년 123 어 ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd SF 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 유유유유유이 hjkhjkhkhkhjkhkh kjkjk 123 123 개그 af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 시간 시간 5년 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 유유유유유이 hjkhjkhkhkhjkhkh kjkjk
div>
div>
<스크립트>
var startX, //터치 시 좌표
시작Y,
x, //슬라이딩 거리
와,
aboveY=0 //마지막 내부 블록 슬라이드 위치를 기록하는 전역 변수 설정
var inner=document.getElementById("inner")
touch=e.touches[0]
touchMove(e){//슬라이드 기능
터치
e
= 터치.pageY - startY;//슬라이딩 거리 //
= 'translate(' 0 'px, 'y'px )'; //css3을 사용할 수도 있습니다.
=aboveY y "px"는 이 문장에서; 마지막 슬라이드 이후 내부 위치 }
touchEnd(e) 기능{//손가락이 화면에서 벗어남
e.preventDefault();
aboveY=parseInt(inner.style.top);//터치 후 내부 슬라이더 기록 완료됨 슬라이딩 위치는 전역 변수에 반영되며 반드시 ParseInt()를 사용하여 정수로 변환되어야 합니다.
스크립트>
몸>
html>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문:

http://www.cnblogs.com/leinov/p/3701951.html