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

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

WBOY원래의: 2016-05-16 15:51:392242검색

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>

위 html5 터치 이벤트는 페이지 슬라이딩 효과(코드 포함)를 구현한 내용이 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.

원문: http://www.tuicool.com/articles/nIBJju

성명：

이전 기사：HTML5 의미론적으로 구조화된 표준화_html5 튜토리얼 기술다음 기사：HTML5 의미론적으로 구조화된 표준화_html5 튜토리얼 기술

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

관련 기사