简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

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

html5 터치 이벤트는 터치스크린 페이지의 위아래 슬라이딩을 구현합니다. (2)_html5 튜토리얼 기술

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

이전 기사에서는 html5 터치 이벤트를 사용하여 간단한 슬라이딩 효과를 만들어 연속 페이지가 위아래로 슬라이딩되는 효과를 구현했습니다. 이전 기사를 참조하고 html5 터치 이벤트를 코드하여 터치스크린의 위아래 슬라이딩을 구현했습니다. 페이지 (1)

이 글은 주로 한 가지 효과를 얻습니다. 페이지가 위쪽이나 아래쪽으로 슬라이드될 때 계속해서 슬라이드되는 것을 방지합니다.

페이지에 터치 이벤트가 추가되기 때문에 스크롤 막대 등 다른 페이지의 원래 기본 속성은 변경되지 않습니다. 이전 기사의 데모에서는 항상 위아래로 슬라이드할 수 있지만 현실은 이렇습니다. 바람직하지 않습니다

전체 코드:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html lang="ko" >  
  3. <머리>  
  4.     <메타 문자 집합="UTF- 8">  
  5.     <메타 이름="뷰포트"  콘텐츠="width=device-width,initial-scale=1 user-scalable=0" />  
  6.     <제목>2014-5-4제목>  
  7.     <스타일>  
  8.     * {여백: 0;  패딩: 0;}   
  9.     #외부{ 너비:90%; 높이: 490px; 배경: #000; 여백: 자동;  오버플로: hidden;}   
  10.     #inner{너비:80%;  배경: #e4e4e4; 여백: 자동; 위치:상대적; 상단:0px; 글꼴 크기: 1em; 패딩: 30px 10px;  }   
  11.     #inner p{line-height: 30px; 문자 간격: 3px; text-indent:2em;}   
  12.     #spText{ 높이: 40px; 너비: 100%;테두리:1px 단색 빨간색;}   
  13.     h2{ 너비: 100%; 텍스트 정렬: 가운데; }   
  14.     h3{ 너비: 100%; 왼쪽 여백:60%;}  
  15.     스타일>  
  16.     <스크립트 src='http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>스크립트>  
  17. 머리>  
  18. <몸>  
  19.   
  20. <div id="spText" >div>  
  21. <div id="spText2" >div>  
  22.     <div id="외부" >  
  23.         <div id="내부" >  
  24.             <h2>背影h2>  
  25.             <h3>—朱自清h3>  
  26.                       <p>我与父亲不相见已이年余了,我最不能忘记的是他的背影。[1-2]   
  27.         那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人の路！”[1-2]   
  28.         回家变卖典质，父亲还了亏空;又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。[1-2]   
  29.         到南京时，有朋友约去游逛，勾留了日;第日日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已나는 결정하지 않는다 ，叫旅馆里一个熟识的tea房陪我同去。他再三嘱咐tea房，甚是仔细。但他终于不放心，怕tea房;不妥帖;颇踌躇了一会。其实我那年已이十岁，북경已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。나는 그에게 가지 말라고 거듭 충고했지만 그는 단지 "상관없어, 가는 것이 좋지 않아!"라고만 말했습니다.
    30. 강을 건너 역으로 들어섰습니다. 표를 샀는데 그 사람이 짐을 챙기느라 바빴어요. 짐이 너무 많아서 포터에게 팁을 주어야 통과할 수 있었습니다. 그는 다시 그들과 가격을 협상하느라 바빴습니다. 그때는 제가 너무 똑똑해서 항상 그 사람이 하는 말이 별로 좋지 않다고 느껴서 제가 끼어들어야 했는데 결국 그 사람이 가격을 합의하고 저를 차로 보내줬어요. 그는 차 문 옆에서 나에게 의자를 가져다 주었고 나는 그가 나를 위해 만들어준 보라색 모피 코트를 좌석 위에 펼쳤다. 길에서 조심하고 밤에도 감기에 걸리지 않도록 조심하라고 하더군요. 나는 또한 웨이터에게 나를 잘 돌봐달라고 요청했습니다. 나는 그의 현학적 인 태도에 몰래 웃었다. 그들은 단지 돈만 인식했고 그들을 신뢰하는 것은 단지 공짜 돈일 뿐이었다! 그리고 나처럼 나이 많은 사람도 나 자신을 돌볼 수는 없는 걸까? [1-2]
    31. "아빠, 가자"고 했더니 차 밖을 보더니 "내가 오렌지 좀 사올게. 넌 여기 있어라. 여기저기 돌아다니지 말고"라고 하더군요. 저기 울타리 밖에는 판매자 몇 명이 손님을 기다리고 있어요. 저기 승강장에 도착하면 철로를 건너 뛰어내렸다가 다시 올라가야 합니다. 아버지는 뚱뚱하셔서 거기까지 걸어가는 것이 더 귀찮을 것 같아요. 가려고 했는데 거절해서 보내줄 수밖에 없었어요. 나는 그가 검은색 천으로 된 모자를 쓰고, 커다란 검은색 천으로 된 만다린 재킷을 입고, 짙은 파란색의 천으로 된 가운을 입고 있는 것을 보았습니다. 그는 비틀거리며 철로 옆으로 몸을 숙였습니다. 그것은 재앙이 아니었습니다. 하지만 철로를 건너 저기 플랫폼까지 올라가는 게 쉽지 않았다. 그는 양손으로 그것을 붙잡고 발을 위로 끌어당겼고, 그의 뚱뚱한 몸은 약간 왼쪽으로 기울어져 노력하는 모습을 보였다. 이때 그의 뒷모습을 보고 눈물이 뚝뚝 떨어졌다. 나는 재빨리 눈물을 닦아냈다. 자기가 볼까봐 두렵고, 다른 사람이 볼까봐 두렵기도 하다. 다시 밖을 보니 그 사람은 이미 주홍색을 껴안고 뒤로 걸어가고 있었습니다. 철길을 건널 때 그는 먼저 귤을 땅에 흩뿌리고 천천히 내려간 다음 귤을 주워 걸어갔습니다. 나는 여기에 도착했을 때 재빨리 그를 도우러 갔습니다. 그는 나와 함께 차로 가서 내 모피 코트 위에 오렌지를 올려 놓았습니다. 그래서 그는 매우 편안한 기분으로 옷에 묻은 먼지를 털어냈습니다. 잠시 후 그는 말했습니다. "나는 떠날 거예요. 거기에 편지를 쓸게요!" 나는 그가 나가는 것을 보았습니다. 몇 걸음 걷다가 뒤돌아서 나를 보고는 '들어가라, 안에는 아무도 없다'고 하더군요. 자리에 앉으니 또 눈물이 났다. [1-2]
    32. 최근 몇 년 동안 아버지와 저는 이리저리 뛰어다니면서 집 상황은 나날이 악화되었습니다. 그는 청년으로서 나가서 생계를 유지하고, 스스로 생계를 유지하며 많은 위대한 일을 행했습니다. Laojing이 그렇게 퇴폐적이라는 것을 누가 알았겠습니까! 그는 너무 슬퍼서 스스로를 도울 수 없었습니다. 마음이 우울할 때 그는 자연스럽게 그것을 밖으로 표현하고, 가족의 사소한 일로 인해 종종 화를 냅니다. 그는 점차 이전과 다르게 나를 대했습니다. 하지만 지난 2년 동안 만나지 않던 그 사람은 결국 내 잘못은 잊어버리고 나와 내 아들만 생각하게 됐다. [1-2]
    33. 북에 와서 나에게 편지를 쓰는데 "건강은 좋은데 팔이 너무 아프고 젓가락과 펜 들기가 너무 불편해요"라고 적혀 있었습니다. 내 죽음이 멀지 않았다는 생각이 든다.” 나는 이 글을 읽으면서 반짝이는 눈물 속에서 다시 녹색 천의 면옷과 검은 천 감귤을 입은 뚱뚱한 모습을 보았다.잘! 그 사람을 언제 다시 볼 수 있을지 모르겠어요!p>
  33. div>
  34.  div> 
  36. <스크립트>
  37. var startX, //터치 시 좌표
  38. 시작Y,
  39. x, //슬라이딩 거리
  40. 와,
  41.  aboveY=0 // 마지막 내부 블록 슬라이드 위치를 기록하는 전역 변수 설정;
  42. var documentHeight=$("#inner").height();//내부 슬라이딩 모듈의 높이
  43. var wapperHeight=$("#outer").height(); //외부 프레임의 높이
  44.                                                   
    46. var
  46. inner=document.getElementById("inner")
    48. 기능 touchStart(e){//터치 시작
    49. e.preventDefault()
    50. var
  50. touch=e.touches[0]
    51.                                                                                                   🎜>
  51. }
  53. touchMove(e){//슬라이드 기능
  54. e.preventDefault()
  55. var 터치 = e.touches[0];
    56.                                                                                                 ~
  56.                                                                                                                       document.getElementById("spText").innerHTML=inner.style.top
    57.                                                    
  57.                                                                                                           함수 touchEnd(e){//손가락이 화면에서 벗어남
    58.                                                                                                              슬라이딩 위치는 전역 변수에 반영되며 parsInt()를 사용하여 정수로 변환해야 합니다.
  58. if(y>
    59. 0&
  59. >
    60. 0){// 온라인으로 스와이프
    61. //
  61. inner.style.top
    62. =
  62. 0
    63. ;
  63. $("#inner").animate({top:0},200)
  64.  위=0; 
  65.                                            
  66.                                                
    67. if(y
  67. <0&&(aboveY<(-( documentHeight-wapperHeight)))){//하단으로 슬라이드할 때 오프라인으로 슬라이드할 수 없습니다
    68.                                                                                                 ~                                      
  68. $("#inner").animate({top:-(documentHeight-wapperHeight)},200)  
    69. 위
  69. =-(documentHeight-wapperHeight);
  70.                                                               }//
    71. document.getElementById("outer").addEventListener('touchstart', touchStart,false)
    72. document.getElementById("outer").addEventListener('touchmove', touchMove,false)
    73. document.getElementById("outer").addEventListener('touchend', touchEnd,false)
    75. 스크립트
  75. >
  76. 몸>
    78. html
  78. >
  79. 위는 데모의 전체 코드입니다. 이번에는 animate를 사용하여 상단과 하단으로의 슬라이딩을 조금 유연하게 만들기 위해 jquery를 사용했습니다 다음은 코드를 복사하여 휴대폰에서 액세스할 수도 있는 데모 효과입니다. 코드는 비교적 간단하며 호환성과 견고성을 고려하지 않고 효과만 얻을 수 있습니다.
    80. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
원문:
http://www.cnblogs.com/leinov/p/3707197.html

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

관련 기사

더보기