検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >html5タッチイベントでタッチスクリーンページの上下スライドを実現(1)_html5チュートリアルスキル

html5タッチイベントでタッチスクリーンページの上下スライドを実現(1)_html5チュートリアルスキル

WBOY
WBOYオリジナル
2016-05-16 15:51:362279ブラウズ

私が最近取り組んでいたアプリプロジェクトでは、overflow:hidden の使用により多くの問題が発生したため、HTML5 の touch イベントについて研究することにしました。包括的な投稿を見つけるのは困難です。HTML5 タッチに関する記事は数多くありますが、そのほとんどはタッチ イベントや非常に短いデモを紹介しています。
上下にスライドする比較的包括的な小さなデモで、コードは比較的単純です。

以下は、いくつかの重要な場所を赤でマークした完全なコードです

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html lang="en" >
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <メタ 名前="ビューポート" コンテンツ="width=device-width,initial-scale=1 user-scalable=0" />
  6. <タイトル>2014-4-29タイトル>
  7. <スタイル>
  8. * {margin: 0;  パディング: 0;}
  9. #outer{ width:90%; 高さ: 490ピクセル; 背景: #000; マージン: 自動;  オーバーフロー: 非表示;}
  10. #inner{width:80%; 高さ: 2000ピクセル; 背景: #f67d42; マージン: 自動; 位置:相対; トップ:0;  }  
  11. スタイル>
  12. <script src='jquery- 1.9.1.min.js'>スクリプト>
  13. 頭>
  14. <ボディ>
  16. <div id="spText" >div>
  17. <div id="アウター" >
  18. <div id="inner" >
  19. 123<br> 123<br> ギャグ<br> af <br> 123br> 123<br> 123<br> 123<br> 123 <br> 123br> 123<br> 123<br> 123<br> 123 <br> 123br> yryyr<br> ryry<br> 123<br> 123 <br> 123br> 123<br> 123<br> sdff<br> fef <br> 123br> hr<br> hrh<br> 5y<br> 123 <br>えー<br> ert<br> 123<br> rgdgdg<br> 123 <br> 123br> 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> ギャグ<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 > 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. <スクリプト>
  24. var startX, //タッチ時の座標
  25. startY、
  26. x, //スライド距離
  27. はい、
  28. aboveY=0 // 最後の内部ブロック スライドの位置を記録するグローバル変数を設定します。
  30. var inner=ドキュメント.getElementById("inner");
  31. 関数 touchSatrt(e){//touch
  32. e.preventDefault();
  33. var
    34. touch
  34. =e.touches[0]; 🎜>
  35. 関数 touchMove(e){//Slide e.preventDefault();
    36. var
  36. touch
    37. =
  37. e
    38. .touches[0];
    39. y
  39. =
    40. touch
  40. .pageY - startY;// スライド距離 //inner.style.webkitTransform =
    41. 'translate('
  41. 0 'px, ' y 'px )'; //css3 も使用できます。 inner.style.top=aboveY
    42. y "px"; //この文の AboveY は最後のスライド後のインナーの位置
  42. }
  44. function touchEnd(e){//指が画面から離れる
  45. e.preventDefault();
  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 チュートリアルのスキル

関連記事

続きを見る