html5中怎么利用touch事件實現(xiàn)頁面上下滑動效果-創(chuàng)新互聯(lián)

html5 中怎么利用touch事件實現(xiàn)頁面上下滑動效果，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為景東等服務建站，景東等地企業(yè)，進行企業(yè)商務咨詢服務。為景東企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

html5 touch事件實現(xiàn)頁面上下滑動效果

  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> 

  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> 

  23. <script> 

  24. var startX,//觸摸時的坐標 

  25. startY, 

  26. x, //滑動的距離 

  27. y, 

  28. aboveY=0; //設一個全局變量記錄上一次內部塊滑動的位置 

  30. var inner=document.getElementById("inner"); 

  31. function touchSatrt(e){//觸摸 

  32. e.preventDefault(); 

  33. var touch=e.touches[0]; 

  34. startY = touch.pageY; //剛觸摸時的坐標 

  35. } 

  37. function touchMove(e){//滑動 

  38. e.preventDefault(); 

  39. var touch = e.touches[0]; 

  40. y = touch.pageY - startY;//滑動的距離 

  41. //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式 

  42. inner.style.top=aboveY+y+"px"; //這一句中的 

  43. } 

  45. function touchEnd(e){//手指離開屏幕 

  46. e.preventDefault(); 

  47. aboveY=parseInt(inner.style.top);//touch結束后記錄內部滑塊滑動的位置 在全局變量中體現(xiàn) 一定要用parseInt()將其轉化為整數(shù)字; 

  49. }// 

  50. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false); 

  51. document.getElementById("outer").addEventListener('touchmove', touchMove,false); 

  52. document.getElementById("outer").addEventListener('touchend', touchEnd,false); 

  53. </script> 

  54. </body> 

  56. </html>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設公司，的支持。

分享題目：html5中怎么利用touch事件實現(xiàn)頁面上下滑動效果-創(chuàng)新互聯(lián)
轉載來于：http://bm7419.com/article38/cdispp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、商城網(wǎng)站、外貿(mào)建站、響應式網(wǎng)站、網(wǎng)站策劃、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設