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

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

WBOY
リリース: 2016-05-16 15:51:37
オリジナル
1402 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート