ホームページ > 記事 > ウェブフロントエンド > HTML5 タッチイベントでページを上下にスライドさせる効果を実現 [コード付き]_html5 チュートリアルスキル

HTML5 タッチイベントでページを上下にスライドさせる効果を実現 [コード付き]_html5 チュートリアルスキル

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

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{幅: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 123br> 123 123 123 123 123br> 123 123 gdggdgdg 123 drgdrgd 123 123 123 ゆゆゆゆゆ hjkhjkhkhkhjkhkh kjkjk 123 123 ギャグ af 123 123 123 123 123br> 123 123 123 123 123br> 123 yryyr ryry 123 123br> 123 123 123 sdff fef 123 hr えー 5y 123 er er 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 ゆゆゆゆゆ hjkhjkhkhkhjkhkh kjkjk
div>
div>
<スクリプト>
var startX,// 触摸時の坐标
startY、
x, //スライド距離
そうだ、
aboveY=0 // 最後の内部ブロックスライドの位置を記録するグローバル変数を設定します。
var inner=ドキュメント.getElementById("inner");
touch=e.touches[0];
= touch.pageY // タッチしたときの座標 ; }
関数 touchMove(e){//スライド
e.preventDefault();
var
= e.touches[0]; y
touch.pageY - startY;// スライド距離 //inner.style.webkitTransform
'translate(' 0 'px, ' y 'px )'; //css3 メソッドも使用できます inner.style.top
aboveY y "px" // この文では }
aboveY
parseInt(inner.style.top);// タッチ後の内部スライダーを記録するスライド位置はグローバル変数に反映されるため、parseInt(); を使用して整数に変換する必要があります。 }//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
>
ボディ>
>
上記の HTML5 タッチイベントは、ページの上下スライド効果を実現します (コード付き) がエディターによって共有されるすべてのコンテンツです。参考にしていただければ幸いです。スクリプトホームをサポートしていただければ幸いです。
http://www.tuicool.com/articles/nIBJju

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 セマンティック構造の標準化_html5 チュートリアルのスキル次の記事：HTML5 セマンティック構造の標準化_html5 チュートリアルのスキル

続きを見る

HTML5 タッチ イベントでページを上下にスライドさせる効果を実現 [コード付き]_html5 チュートリアル スキル

関連記事

HTML5 タッチイベントでページを上下にスライドさせる効果を実現 [コード付き]_html5 チュートリアルスキル