html5 touch事件實現頁面上下滑動效果【附代碼】

html5 touch事件實現頁面上下滑動效果【附代碼】_html5教學技巧

WBOY

發布： 2016-05-16 15:51:39

原創

2301 人瀏覽過

html5 touch事件實現頁面上下滑動效果【附程式碼】

XML/HTML Code複製內容到剪貼簿

html>
html lang="en" >
頭>
元字符集="UTF- 8">
元名稱="視口" 內容="width=device-width,initial-scale=1 user-scalable=0" />
標題>2014-4-292014-4-29
標題>
樣式
>
* {邊距：0; 填充：0;} #outer{ 寬度：90%；高度：490 像素；背景：#000；邊距：自動；溢位：隱藏；} #inner{寬度:80%; 高度：2000 像素；背景：#f67d42；邊距：自動；職位：親屬；頂部：0； }
樣式>
腳本 src=src=src=src=
=>腳本>
頭>
身體> div id=
"spText" >div>

div

123br> 123> 搞笑br> 🎜>> >br> 123br>br>br>br>br> 123brbr 123br> 123 >> 123br> 123 br> 123br>br>br>br> 123 br>br> 🎜>br> yryyrbrbrbr ryrybr> 123 > 123 br> 123br> 123br>br>br> sdffbrbr br> 123brbr hrbr> hrh> 5 年br> 123br> 呃br> br> 123br> rgdgdgbr> 123> 123br> 123 123br> 123br>br> > br> 123 brbrbr> sdsdsdsdsdsdsdbr> 🎜> SFbr> 123brbr 123br> 123 >> 123br> 123 br> 123br>br>br>br> 123brbr>br>br> 123 br brbr drgdrgdbr> 123 123> 123br> 123br> yuyuyuyuyuy br> hjkhjkhkhkhjkhkhbr> kjkjkbr> 123br> 123brbr> 搞笑 br> af af af af af af> 123br>br>br> >br> 123br>br>br>br>br> 123brbr 123br> 123 >> 123br> 123 br> 123br>br>br>br> yryyrbrbr> 🎜>br> 123 br brbr 123br> 123 > 123br> 123br> sdff br>br>br br> 123br>br> hrhbrbr >br >br >br> 5年br> 123br >> 呃br> 呃呃> 123br >br >br >br > br> 123 br> br> 🎜>br> 123brbrbr 123br > 123 > 123 br> gfbr> sdsdsdsdsdbr> br > 123brbrbr謝謝123 br> 123brbr> 123br> 123 > 123br>br>br> > br> 123br>br>br>br> 123brbr
drgdrgdbr> 123

br
> yuyuyuyu？ 🎜>br> kjkjk
>
startY,
x, //滑動的距離
y,
aboveY=0; //設一個全域變數記錄上一次內部塊的位置 >
var inner=document.getElementById("inner") ent.getElementById("inner") ;
function touchSatrt(e){//觸摸
e.preventDefault();
var touch=e.touches[0];
startY = touch.pageY; //剛觸摸時的座標.pageY; //剛觸摸時的座標 }
function touchMove(e){//滑動
e.preventDefault();
var
touch = e.touches[0]; y
= touch.pageY - start> //inner.style.webkitTransform =
'translate(' )'; //也可以用css3的方式 inner.style.top=
y "px"; > }
function touchEnd(e){//手指離開畫面
e.preventDefault();
aboveY
=parseInt
(inner.style.top);//touch結束後記錄內部滑桿滑動的位置在全域變數中體現一定要用parseInt()轉換為整數位; }//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
script>
body>
html>
以上這篇html5 touch事件實現頁面上下滑動效果【附代碼】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文：http://www.tuicool.com/articles/nIBJju