집 > 기사 > 웹 프론트엔드 > HTML5 터치 이벤트는 터치스크린 페이지의 위아래 슬라이딩을 구현합니다. (1)

HTML5 터치 이벤트는 터치스크린 페이지의 위아래 슬라이딩을 구현합니다. (1)

不言원래의: 2018-06-05 14:43:583475검색

이 글에서는 주로 터치스크린 페이지의 상하 슬라이딩을 구현하기 위한 html5 터치 이벤트와 관련된 코드를 자세히 소개합니다. 관심 있는 친구들은 참고할 수 있습니다.

그 앱을 만드는 최근 프로젝트. :hidden을 사용했기 때문에 문제가 많이 발생하여 html5의 터치 이벤트에 대해 연구해 보기로 했습니다. html5 터치에 관한 글은 많지만 대부분 터치 이벤트나 아주 짧은 데모를 소개하고 있습니다.
위아래로 슬라이딩하는 비교적 포괄적인 소규모 데모로, 코드는 비교적 간단합니다.

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

XML/HTML Code클립보드에 내용을 복사하세요

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>  
    <title>2014-4-29</title>  
    <style>  
    * {margin: 0;  padding: 0;}   
    #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
    #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }   
    </style>  
    <script src=&#39;jquery-1.9.1.min.js&#39;></script>  
</head>  
<body>  
  
<p id="spText"></p>  
    <p id="outer">  
        <p id="inner">  
        123<br>        123<br>    gag<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> hr<br> hrh<br> 5y<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> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>123<br>      123<br>    gag<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> hr<br> hrh<br> 5y<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> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>         
        </p>  
    </p>  
  
    <script>  
        var startX,//触摸时的坐标   
            startY,   
             x, //滑动的距离   
             y,   
             aboveY=0; //设一个全局变量记录上一次内部块滑动的位置    
  
         var inner=document.getElementById("inner");   
            
            function touchSatrt(e){//触摸   
                e.preventDefault();   
                var touch=e.touches[0];   
                startY = touch.pageY;   //刚触摸时的坐标                 
            }   
  
            function touchMove(e){//滑动             
                 e.preventDefault();           
                 var  touch = e.touches[0];                  
                 y = touch.pageY - startY;//滑动的距离   
                //inner.style.webkitTransform = &#39;translate(&#39; + 0+ &#39;px, &#39; + y + &#39;px)&#39;;  //也可以用css3的方式        
                inner.style.top=aboveY+y+"px"; //这一句中的aboveY是inner上次滑动后的位置                      
            }     
  
            function touchEnd(e){//手指离开屏幕   
              e.preventDefault();                      
              aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;   
  
            }//   
             document.getElementById("outer").addEventListener(&#39;touchstart&#39;, touchSatrt,false);     
             document.getElementById("outer").addEventListener(&#39;touchmove&#39;, touchMove,false);     
             document.getElementById("outer").addEventListener(&#39;touchend&#39;, touchEnd,false);     
    </script>  
</body>  
  
</html>

위 내용이 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 됩니다.

HTML5 터치 이벤트는 터치스크린 페이지의 위아래 슬라이딩을 구현합니다. (1)

관련 기사