検索

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

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

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

前の記事では、html5 タッチ イベントを使用して単純なスライド効果を作成し、連続的なページの上下スライドの効果を実現しました。前の記事を参照して、html5 タッチ イベントをコードして、タッチ スクリーンの上下スライドを実現します。ページ (1)

この記事は主に 1 つの効果をもたらします。ページが上または下にスライドすると、スライドが続行されなくなります。

タッチイベントがページに追加されるため、スクロールバーなど他のページの元々のデフォルト属性は変更されません。前の記事のデモでは常に上下にスライドできますが、実際にはこれです。お勧めできません

完全なコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html lang="en" >
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <メタ 名前="ビューポート" コンテンツ="width=device-width,initial-scale=1 user-scalable=0" />
  6. <タイトル>2014-5-4タイトル>
  7. <スタイル>
  8. * {margin: 0;  パディング: 0;}
  9. #outer{ width:90%; 高さ: 490ピクセル; 背景: #000; マージン: 自動;  オーバーフロー: 非表示;}
  10. #inner{width:80%;  背景: #e4e4e4; マージン: 自動; 位置:相対; 上:0px; フォントサイズ: 1em; パディング: 30ピクセル 10ピクセル;  }
  11. #inner p{line-height: 30px; 文字間隔: 3px; text-indent:2em;}
  12. #spText{ 高さ: 40px; width: 100%;border:1px solid red;}
  13. h2{ 幅: 100%; text-align: 中央; }
  14. h3{ 幅: 100%; パディング左:60%;}  
  15. スタイル>
  16. <script src='http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>スクリプト>
  17. 頭>
  18. <ボディ>
  20. <div id="spText" >div>
  21. <div id="spText2" >div>
  22. <div id="アウター" >
  23. <div id="inner" >
  24. <h2>背影h2>
  25. <h3>—朱自清h3>
  26. <p>我与父亲不相见已二年余了，我最不能[1-2]
  27. 那年冬天、祖母死去、父亲の差使者交卸、正祸不行日子。父の说：“事是如、不必过、好在天無绝人之路！”[1-2]
  28. 回家变卖典质、父亲了亏空；借钱办了丧事。 ，我也要回北京念书，我们便同行。[1-2]
  29. 南京時間、有朋友约去游逛、勾留了一日；第二日上午便须江渡江，下午上车北去。他に三つの茶房、さらには仔细でもある。しかし、ずっと心は解放されておらず、茶房不閉帖；一つの会合が開かれている。二度三度来ました、何の用事もありませんでした。私は彼に行かないように何度も忠告しましたが、彼はただ「関係ない、行くのは良くないよ！」と言いました。
    30. 私たちは川を渡って駅に入りました。私はチケットを購入しましたが、彼は荷物の世話で忙しかったです。荷物が多すぎたので、ポーターにチップを渡さなければなりませんでした。彼は再び彼らと価格交渉するのに忙しかった。当時の私は本当に賢すぎて、彼の言うことはあまり良くないといつも感じていて、私は自分自身をさえぎらなければならなかったのですが、最終的に彼は価格に同意し、私を車まで送ってくれました。彼は私に車のドアのそばの椅子を選んでくれたので、私は彼が作ってくれた紫色の毛皮のコートをその座席に広げました。彼は私に、風邪を引かないように道中気をつけて、夜も気をつけてくださいと言いました。ウェイターさんにも丁寧な対応をお願いしました。私は彼の衒学的さに密かに笑ってしまいました。彼らはお金しか認識しておらず、彼らを信頼することは単なるタダのお金でした。そして、私と同じくらいの年齢の人にとって、私はまだ自分の世話をすることができないのでしょうか？ [1-2]
    31. 私が「お父さん、行きましょう。」と言うと、お父さんは車の外を見て、「オレンジを買うよ。ここにいて、動き回らないでね。」と言いました。あそこには柵の外で数人の売り手が客を待っている。あそこのホームに着いたら、線路を渡って飛び降りて、また登らなければなりません。私の父は太っているので、そこまで歩くのはもっと大変です。私は行こうとしたが、彼が拒否したので、行かせなければならなかった。私は彼が黒い布製の帽子をかぶって、大きな黒い布製のマンダリンジャケットを着て、そして紺色の布製の綿のローブを着ているのを見ました。しかし、彼にとって線路を渡って向こうのホームに登るのは簡単ではありませんでした。彼は両手でそれにしがみつき、足を上に引っ込め、太った体をわずかに左に傾けて努力を示した。この時、彼の背中を見たら、すぐに涙が流れました。私はすぐに涙をぬぐった。自分がそれを見るのが怖いし、他の人に見られるのも怖い。もう一度外を見ると、彼はすでに緋オレンジを抱きしめて歩いて帰っていました。線路を渡るとき、彼はまずオレンジを地面にばらまき、ゆっくりと降りて、それからオレンジを拾って歩き去った。ここに着くと、すぐに彼を助けに行きました。彼は私と一緒に車まで歩いて行き、私の毛皮のコートの上にオレンジを置きました。それで彼は服の汚れを吹き飛ばし、とてもリラックスした気分になりました。しばらくして、彼は言いました、「私は出発します。あそこで手紙を書きます！」 私は彼が出かけるのを見ました。彼は数歩歩き、振り返って私を見て、「入ってください、中には誰もいません。」彼の背中が行き交う人々に溶け込み、もう彼が見つからなくなったとき、私は入ってきました。座るとまた涙が出てきました。 [1-2]
    32. 近年、父と私は走り回り、家庭の状況は日に日に悪化していきました。彼は若者として生計を立てようと外に出て、自分で自活し、多くの偉業を成し遂げました。老京がこれほど退廃的であるとは誰が知っていたでしょうか。彼はとても悲しくてどうしようもなかった。内心落ち込んでいると自然とそれを表に出してしまうし、家族の些細なことで腹を立ててしまうことがよくある。彼は徐々に私を以前とは違う扱いをしてくれました。しかし、過去 2 年間会わなかった後、彼はついに私の欠点を忘れ、私と私の息子のことだけを考えました。 [1-2]
    33. 私が北に来てから、彼は私に手紙を書きました。その手紙の中で、「私は健康ですが、腕がひどく痛くて、箸やペンを持つのがとても不便です」と書かれていました。私の死はそう遠くないと思います。」これを読んでいると、私は再び緑の綿のローブと黒い布のマンダリンを着た太った姿を見た。良い！またいつ会えるか分かりません！p>
  33. div>
  34. div>
  36. <スクリプト>
  37. var startX, //タッチ時の座標
  38. startY、
  39. x, //スライド距離
  40. はい、
  41. aboveY=0 // 最後の内部ブロック スライドの位置を記録するグローバル変数を設定します。
  42. var documentHeight=$("#inner").height();//内部スライドモジュールの高さ
  43. var wapperHeight=$("#outer").height(); //外枠の高さ
    46. var
  46. inner=ドキュメント.getElementById("inner");
  47. function touchStart(e){//タッチスタート
  48. e.preventDefault();
  49. var
    50. touch
  50. =e.touches[0]; 🎜> }
  52. 関数 touchMove(e){//Slide
  53. e.preventDefault();
  54. var touch = e.touches[0];
  55. document.getElementById("spText").innerHTML=inner.style.top;
  56. function touchEnd(e){//指が画面から離れる スライド位置はグローバル変数に反映され、parseInt();
    57. を使用して整数に変換する必要があります。
  57. if(y>0&
    58. >
  58. 0){//トップ オンラインでスワイプ
  59. //
    60. inner.style.top
  60. =
    61. 0
  61. ;
    62. $("#inner").animate({top:0},200);
  63. 上 Y=0;
    65. if(y
  65. <0&&(aboveY<(-( documentHeight-wapperHeight)))){//一番下にスライドするとオフラインではスライドできません
  66. $("#inner").animate({top:-(documentHeight-wapperHeight)},200);
    67. 上 Y
  67. =-(documentHeight-wapperHeight);
  68. }//
    69. document.getElementById("outer").addEventListener('touchstart', touchStart,false);
    70. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
    71. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    73. スクリプト
  73. >
  74. ボディ>
    76. html
  76. >
  77. 上記はデモの完全なコードです。今回は上下へのスライドを少し柔軟にするために animate を使用しているため、jquery を使用しました。 以下はデモの効果です。コードをコピーして携帯電話でアクセスすることもできます。このコードは互換性や堅牢性を考慮せずにのみ効果を実現します。
    以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
原文:
http://www.cnblogs.com/leinov/p/3707197.html

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 Canvas 入門 (1) - 基本概念_html5 チュートリアル スキル次の記事：HTML5 Canvas 入門 (1) - 基本概念_html5 チュートリアル スキル

関連記事

続きを見る