찾다

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

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

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

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

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

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html lang="ko" >  
  3. <머리>  
  4.     <메타 문자 집합="UTF- 8">  
  5.     <메타 이름="뷰포트"  콘텐츠="width=device-width,initial-scale=1 user-scalable=0" />  
  6.     <제목>2014-4-29제목>  
  7.     <스타일>  
  8.     * {여백: 0;  패딩: 0;}   
  9.     #외부{ 너비:90%; 높이: 490px; 배경: #000; 여백: 자동;  오버플로: hidden;}   
  10.     #inner{너비:80%; 높이: 2000px; 배경: #f67d42; 여백: 자동; 위치:상대적; 상단:0;  }  
  11.     스타일>  
  12.     <스크립트 src='jquery- 1.9.1.min.js'>스크립트>  
  13. 머리>  
  14. <몸>  
  15.   
  16. <div id="spText" >div>  
  17.     <div id="외부" >  
  18.         <div id="내부" >  
  19.         123<br>        123<br>    개그<br> af <br> 123<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  123<br> 123<br> 123<br> 123 <br> 123<br>  yryyr<br> ryry<br> 123<br> 123 <br> 123<br>  123<br> 123<br> sdff<br> fef <br> 123<br>  시간<br> 시간<br> 5년<br> 123 <br> 어<br>  ert<br> 123<br> rgdgdg<br> 123 <br> 123<br>  123<br> 123<br> 123<br> 123 <br> gfgfgfgfgfgf<br>  sdsdsdsdsdsd<br> SF<br> 123<br> 123<br > 123<br> 123< br> 123<br> 123<br> 123<br > 123<br> gdggdgdg< br> 123<br> drgdrgd<br> 123<br > 123<br> 123< br> 유유유유유이<br> hjkhjkhkhkhjkhkh<br> kjkjk<br >123<br>      123< br>    개그<br> af<br> 123<br > 123<br> 123< br> 123<br> 123<br> 123<br > 123<br> 123< br> 123<br> 123<br> 123<br > yryyr<br> ryry< br> 123<br> 123<br> 123<br > 123<br> 123< br> sdff<br> fef<br> 123<br> 시간<br > 시간<br> 5년< br> 123<br> er<br> ert<br > 123<br> rgdgdg< br> 123<br> 123<br> 123<br > 123<br> 123< br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br > sf<br> 123< br> 123<br> 123<br> 123<br > 123<br> 123< br> 123<br> 123<br> gdggdgdg<br > 123<br> drgdrgd< br> 123<br> 123<br> 123<br > 유유유유유이<br> hjkhjkhkhkhjkhkh< br> kjkjk<br>         
  20.         div>  
  21.     div>  
  22.   
  23. <스크립트>
  24. var startX, //터치 시 좌표
  25. 시작Y,
  26. x, //슬라이딩 거리
  27. 와,
  28.  aboveY=0 //마지막 내부 블록 슬라이드 위치를 기록하는 전역 변수 설정
  30. var inner=document.getElementById("inner")
  31.                                        
    32. 기능 touchSattt(e){//touch
    33. e.preventDefault()
    34. var
  34. touch=e.touches[0]
    35.                                                                                                                                 🎜>
  35.                                                      touchMove(e){//슬라이드 기능
    36. e.preventDefault()
    37. var
  37. 터치
    38. =
  38. e
    39. .touches[0];
  39.  
    40. y
  40. = 터치.pageY - startY;//슬라이딩 거리 //
    41. inner.style.webkitTransform
  41. = 'translate(' 0 'px, 'y'px )'; //css3을 사용할 수도 있습니다.  
    42. inner.style.top
  42. =aboveY y "px"는 이 문장에서; 마지막 슬라이드 이후 내부 위치 }             
  44. touchEnd(e) 기능{//손가락이 화면에서 벗어남
  45. e.preventDefault();
    46.  
  46. aboveY=parseInt(inner.style.top);//터치 후 내부 슬라이더 기록 완료됨 슬라이딩 위치는 전역 변수에 반영되며 반드시 ParseInt()를 사용하여 정수로 변환되어야 합니다.
    48. }//
    49. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false)
    50. document.getElementById("outer").addEventListener('touchmove', touchMove,false)
    51. document.getElementById("outer").addEventListener('touchend', touchEnd,false)
  52. 스크립트>
  53. 몸>
  55. html>
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문:

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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 Canvas 시작하기(2) - Path_html5 튜토리얼 기술다음 기사：HTML5 Canvas 시작하기(2) - Path_html5 튜토리얼 기술

관련 기사

더보기