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

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

WBOY

リリース： 2016-05-16 15:51:36

オリジナル

2208 人が閲覧しました

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

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

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

>
<html lang="en" >
<頭>
<メタ charset="UTF- 8">
<メタ名前="ビューポート" コンテンツ="width=device-width,initial-scale=1 user-scalable=0" />
<タイトル>2014-4-29タイトル>
<スタイル>
* {margin: 0; パディング: 0;}
#outer{ width:90%; 高さ: 490ピクセル; 背景: #000; マージン: 自動; オーバーフロー: 非表示;}
#inner{width:80%; 高さ: 2000ピクセル; 背景: #f67d42; マージン: 自動; 位置:相対; トップ:0; }
スタイル>
<script src='jquery- 1.9.1.min.js'>スクリプト>
頭>
<ボディ>
<div id="spText" >div>
<div id="アウター" >
<div id="inner" >
123 123 ギャグ af 123br> 123 123 123 123 123br> 123 123 123 123 123br> yryyr ryry 123 123 123br> 123 123 sdff fef 123br> hr hrh 5y 123 えー ert 123 rgdgdg 123 123br> 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk 123 123 ギャグ af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 時間 hrh 5y 123 er ert 123 rgdgdg 123 123 123 123 123 123 gfgfgfgfgfgf sdsdsdsdsdsd sf 123 123 123 123 123 123 123 123 gdggdgdg 123 drgdrgd 123 123 123 yuyuyuyuyuy hjkhjkhkhkhjkhkh kjkjk
div>
div>
<スクリプト>
var startX, //タッチ時の座標
startY、
x, //スライド距離
はい、
aboveY=0 // 最後の内部ブロックスライドの位置を記録するグローバル変数を設定します。
var inner=ドキュメント.getElementById("inner");
関数 touchSatrt(e){//touch
e.preventDefault();
var
=e.touches[0]; 🎜>
関数 touchMove(e){//Slide e.preventDefault();
touch
e
=
.pageY - startY;// スライド距離 //inner.style.webkitTransform =
0 'px, ' y 'px )'; //css3 も使用できます。 inner.style.top=aboveY
}
function touchEnd(e){//指が画面から離れる
e.preventDefault();
aboveY=parseInt(inner.style.top);// タッチ後の内部スライダーを記録するスライド位置はグローバル変数に反映されるため、parseInt(); を使用して整数に変換する必要があります。
スクリプト>
ボディ>
html>

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。