HTML5 터치 이벤트는 페이지를 위아래로 슬라이드하는 효과를 구현합니다. [코드 포함]

HTML5 터치 이벤트는 페이지를 위아래로 슬라이드하는 효과를 구현합니다. [코드 포함]_html5 튜토리얼 기술

WBOY

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

원래의

2289명이 탐색했습니다.

html5 터치 이벤트로 페이지 상하 슬라이딩 효과 구현 [코드 포함]

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

>
<html lang="ko" >
<머리>
<메타 문자 집합="UTF- 8">
<메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1 user-scalable=0" />
<제목>2014-4-29제목>
<스타일>
* {여백: 0; 패딩: 0;}
#outer{ 너비:90%; 높이: 490px; 배경: #000; 여백: 자동; 오버플로: 숨김;}
#내부{너비: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 유유유유유이 hjkhjkhkhkhjkhh kjkjk 123 123 개그 af 123 123 123 123 123 123 123 123 123 123 123 yryyr 리리 123 123 123 123 123 sdff fef 123 시간 hrh 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
div>
div>
<스크립트>
var startX,//触摸时的坐标
startY,
x, //슬라이딩 거리
야,
aboveY=0 //마지막 내부 블록 슬라이드 위치를 기록하는 전역 변수 설정
var inner=document.getElementById("inner")
touchSattt(e) 기능{//touch
e.preventDefault()
var 터치=e.touches[0]
startY = touch.pageY; //터치했을 때의 좌표
}
touchMove(e){//슬라이드 기능
e.preventDefault()
var 터치 = e.touches[0]
y = 터치.pageY - startY;//슬라이딩 거리
//inner.style.webkitTransform = 'translate(' 0 'px, 'y'px )'; //css3 방식을 사용할 수도 있습니다
inner.style.top=aboveY y "px"; //이 문장에서
}
touchEnd(e) 기능{//손가락이 화면에서 벗어남
e.preventDefault()
aboveY=parseInt(inner.style.top);//터치 후 내부 슬라이더를 기록합니다. 끝 슬라이딩 위치는 전역 변수에 반영되며
}//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false)
document.getElementById("outer").addEventListener('touchmove', touchMove,false)
document.getElementById("outer").addEventListener('touchend', touchEnd,false)
스크립트>
몸>
html>