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