html5中如何利用touch事件實現(xiàn)頁面上下滑動效果

發(fā)布時間：2022-04-24 15:51:36 來源：億速云閱讀：122 作者：iii 欄目：大數(shù)據(jù)

本篇內(nèi)容介紹了“html5中如何利用touch事件實現(xiàn)頁面上下滑動效果”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

html5 touch事件實現(xiàn)頁面上下滑動效果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>2014-4-29</title>
<style>
* {margin: 0; padding: 0;}
#outer{ width:90%; height: 490px; background: #000; margin: auto; overflow: hidden;}
#inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0; }
</style>
<script src='jquery-1.9.1.min.js'></script>
</head>
<body>
<div id="spText"></div>
<div id="outer">
<div id="inner">
123 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr 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 123 123 gag af 123 123 123 123 123 123 123 123 123 123 123 yryyr ryry 123 123 123 123 123 sdff fef 123 hr 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>
<script>
var startX,//觸摸時的坐標(biāo)
startY,
x, //滑動的距離
y,
aboveY=0; //設(shè)一個全局變量記錄上一次內(nèi)部塊滑動的位置
var inner=document.getElementById("inner");
function touchSatrt(e){//觸摸
e.preventDefault();
var touch=e.touches[0];
startY = touch.pageY; //剛觸摸時的坐標(biāo)
}
function touchMove(e){//滑動
e.preventDefault();
var touch = e.touches[0];
y = touch.pageY - startY;//滑動的距離
//inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式
inner.style.top=aboveY+y+"px"; //這一句中的
}
function touchEnd(e){//手指離開屏幕
e.preventDefault();
aboveY=parseInt(inner.style.top);//touch結(jié)束后記錄內(nèi)部滑塊滑動的位置在全局變量中體現(xiàn) 一定要用parseInt()將其轉(zhuǎn)化為整數(shù)字;
}//
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事件實現(xiàn)頁面上下滑動效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

html5中如何利用touch事件實現(xiàn)頁面上下滑動效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽