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

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

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

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

完全なコード:

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
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. 南京時間、有朋友约去游逛、勾留了一日；第二日上午便须江渡江，下午上车北去。他に三つの茶房、さらには仔细でもある。しかし、ずっと心は解放されておらず、茶房不閉帖；一つの会合が開かれている。二度三度来ました、何の用事もありませんでした。私は彼に行かないように何度も忠告しましたが、彼はただ「関係ない、行くのは良くないよ！」と言いました。
私たちは川を渡って駅に入りました。私はチケットを購入しましたが、彼は荷物の世話で忙しかったです。荷物が多すぎたので、ポーターにチップを渡さなければなりませんでした。彼は再び彼らと価格交渉するのに忙しかった。当時の私は本当に賢すぎて、彼の言うことはあまり良くないといつも感じていて、私は自分自身をさえぎらなければならなかったのですが、最終的に彼は価格に同意し、私を車まで送ってくれました。彼は私に車のドアのそばの椅子を選んでくれたので、私は彼が作ってくれた紫色の毛皮のコートをその座席に広げました。彼は私に、風邪を引かないように道中気をつけて、夜も気をつけてくださいと言いました。ウェイターさんにも丁寧な対応をお願いしました。私は彼の衒学的さに密かに笑ってしまいました。彼らはお金しか認識しておらず、彼らを信頼することは単なるタダのお金でした。そして、私と同じくらいの年齢の人にとって、私はまだ自分の世話をすることができないのでしょうか？ [1-2]
私が「お父さん、行きましょう。」と言うと、お父さんは車の外を見て、「オレンジを買うよ。ここにいて、動き回らないでね。」と言いました。あそこには柵の外で数人の売り手が客を待っている。あそこのホームに着いたら、線路を渡って飛び降りて、また登らなければなりません。私の父は太っているので、そこまで歩くのはもっと大変です。私は行こうとしたが、彼が拒否したので、行かせなければならなかった。私は彼が黒い布製の帽子をかぶって、大きな黒い布製のマンダリンジャケットを着て、そして紺色の布製の綿のローブを着ているのを見ました。しかし、彼にとって線路を渡って向こうのホームに登るのは簡単ではありませんでした。彼は両手でそれにしがみつき、足を上に引っ込め、太った体をわずかに左に傾けて努力を示した。この時、彼の背中を見たら、すぐに涙が流れました。私はすぐに涙をぬぐった。自分がそれを見るのが怖いし、他の人に見られるのも怖い。もう一度外を見ると、彼はすでに緋オレンジを抱きしめて歩いて帰っていました。線路を渡るとき、彼はまずオレンジを地面にばらまき、ゆっくりと降りて、それからオレンジを拾って歩き去った。ここに着くと、すぐに彼を助けに行きました。彼は私と一緒に車まで歩いて行き、私の毛皮のコートの上にオレンジを置きました。それで彼は服の汚れを吹き飛ばし、とてもリラックスした気分になりました。しばらくして、彼は言いました、「私は出発します。あそこで手紙を書きます！」 私は彼が出かけるのを見ました。彼は数歩歩き、振り返って私を見て、「入ってください、中には誰もいません。」彼の背中が行き交う人々に溶け込み、もう彼が見つからなくなったとき、私は入ってきました。座るとまた涙が出てきました。 [1-2]
近年、父と私は走り回り、家庭の状況は日に日に悪化していきました。彼は若者として生計を立てようと外に出て、自分で自活し、多くの偉業を成し遂げました。老京がこれほど退廃的であるとは誰が知っていたでしょうか。彼はとても悲しくてどうしようもなかった。内心落ち込んでいると自然とそれを表に出してしまうし、家族の些細なことで腹を立ててしまうことがよくある。彼は徐々に私を以前とは違う扱いをしてくれました。しかし、過去 2 年間会わなかった後、彼はついに私の欠点を忘れ、私と私の息子のことだけを考えました。 [1-2]
私が北に来てから、彼は私に手紙を書きました。その手紙の中で、「私は健康ですが、腕がひどく痛くて、箸やペンを持つのがとても不便です」と書かれていました。私の死はそう遠くないと思います。」これを読んでいると、私は再び緑の綿のローブと黒い布のマンダリンを着た太った姿を見た。良い！またいつ会えるか分かりません！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(); //外枠の高さ
var
46. inner=ドキュメント.getElementById("inner");
47. function touchStart(e){//タッチスタート
48. e.preventDefault();
49. var
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. if(y>0&
>
58. 0){//トップ オンラインでスワイプ
59. //
inner.style.top
60. =
0
61. ;
$("#inner").animate({top:0},200);
63. 上 Y=0;
if(y
65. 0&&(aboveY(-( documentHeight-wapperHeight)))){//一番下にスライドするとオフラインではスライドできません
66. $("#inner").animate({top:-(documentHeight-wapperHeight)},200);
上 Y
67. =-(documentHeight-wapperHeight);
68. }//
document.getElementById("outer").addEventListener('touchstart', touchStart,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
スクリプト
73. >
74. ボディ>
html
76. >
77. 上記はデモの完全なコードです。今回は上下へのスライドを少し柔軟にするために animate を使用しているため、jquery を使用しました。 以下はデモの効果です。コードをコピーして携帯電話でアクセスすることもできます。このコードは互換性や堅牢性を考慮せずにのみ効果を実現します。
    以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

原文:

http://www.cnblogs.com/leinov/p/3707197.html