欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5 touch事件實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)(一)

  發(fā)布時(shí)間：2016-03-10 09:03:31   作者：Leinov   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了html5 touch事件實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)的相關(guān)代碼，代碼注釋很清楚，感興趣的小伙伴們可以參考一下

最近做的做那個(gè)app的項(xiàng)目由于用overflow：hidden導(dǎo)致了很多問(wèn)題，于是決定研究下html5的touch事件。想找個(gè)全面點(diǎn)的帖子很難，雖然好多關(guān)于html5 touch的文章但大多都是介紹touch事件或者很簡(jiǎn)短的小demo。
比較全面的上下滑動(dòng)的小demo，代碼比較簡(jiǎn)單。

下面是完整代碼，我把幾個(gè)重要的地方做了紅色標(biāo)記

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>  
  6.     <title>2014-4-29</title>  
  7.     <style>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
  10.     #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }   
  11.     </style>  
  12.     <script src='jquery-1.9.1.min.js'></script>  
  13. </head>  
  14. <body>  
  15.   
  16. <div id="spText"></div>  
  17.     <div id="outer">  
  18.         <div id="inner">  
  19.         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>         
  20.         </div>  
  21.     </div>  
  22.   
  23.     <script>  
  24.         var startX,//觸摸時(shí)的坐標(biāo)   
  25.             startY,   
  26.              x, //滑動(dòng)的距離   
  27.              y,   
  28.              aboveY=0; //設(shè)一個(gè)全局變量記錄上一次內(nèi)部塊滑動(dòng)的位置    
  29.   
  30.          var inner=document.getElementById("inner");   
  31.             
  32.             function touchSatrt(e){//觸摸   
  33.                 e.preventDefault();   
  34.                 var touch=e.touches[0];   
  35.                 startY = touch.pageY;   //剛觸摸時(shí)的坐標(biāo)                 
  36.             }   
  37.   
  38.             function touchMove(e){//滑動(dòng)             
  39.                  e.preventDefault();           
  40.                  var  touch = e.touches[0];                  
  41.                  y = touch.pageY - startY;//滑動(dòng)的距離   
  42.                 //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式        
  43.                 inner.style.top=aboveY+y+"px"; //這一句中的aboveY是inner上次滑動(dòng)后的位置                      
  44.             }     
  45.   
  46.             function touchEnd(e){//手指離開(kāi)屏幕   
  47.               e.preventDefault();                      
  48.               aboveY=parseInt(inner.style.top);//touch結(jié)束后記錄內(nèi)部滑塊滑動(dòng)的位置 在全局變量中體現(xiàn) 一定要用parseInt()將其轉(zhuǎn)化為整數(shù)字;   
  49.   
  50.             }//   
  51.              document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);     
  52.              document.getElementById("outer").addEventListener('touchmove', touchMove,false);     
  53.              document.getElementById("outer").addEventListener('touchend', touchEnd,false);     
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/leinov/p/3701951.html

相關(guān)文章

  • html5 touch事件實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)(二)

    這篇文章主要為大家詳細(xì)介紹了html5 touch事件實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)的相關(guān)代碼，頁(yè)面滑動(dòng)到最上面和最下面的時(shí)候阻止其再繼續(xù)滑動(dòng)，代碼注釋很清楚，感興趣的小伙伴們可以
    2016-03-10

  • html5構(gòu)建觸屏網(wǎng)站之touch事件介紹

    手機(jī)上的大部分交互都是通過(guò)touch來(lái)實(shí)現(xiàn)的，于是，對(duì)于觸屏的交互式網(wǎng)站，觸摸事件是相當(dāng)重要的,這里我們介紹幾種普及得比較好的觸摸事件，你可以在絕大多數(shù)現(xiàn)代瀏覽器中來(lái)
    2013-01-07

  • html5 touch事件實(shí)現(xiàn)頁(yè)面上下滑動(dòng)效果【附代碼】

    下面小編就為大家?guī)?lái)一篇html5 touch事件實(shí)現(xiàn)頁(yè)面上下滑動(dòng)效果【附代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家。一起過(guò)來(lái)看看吧，給大家一個(gè)參考
    2016-03-10

最新評(píng)論