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

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

WBOY

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

オリジナル

2307 人が閲覧しました

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