免费精品视频在线,伊人久久成人成综合网222

html5 touch事件實(shí)現(xiàn)頁(yè)面上下滑動(dòng)效果【附代碼】

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!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,//觸摸時(shí)的坐標(biāo)
startY,
x, //滑動(dòng)的距離
y,
aboveY=0; //設(shè)一個(gè)全局變量記錄上一次內(nèi)部塊滑動(dòng)的位置
var inner=document.getElementById("inner");
function touchSatrt(e){//觸摸
e.preventDefault();
var touch=e.touches[0];
startY = touch.pageY; //剛觸摸時(shí)的坐標(biāo)
}
function touchMove(e){//滑動(dòng)
e.preventDefault();
var touch = e.touches[0];
y = touch.pageY - startY;//滑動(dòng)的距離
//inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式
inner.style.top=aboveY+y+"px"; //這一句中的
}
function touchEnd(e){//手指離開(kāi)屏幕
e.preventDefault();
aboveY=parseInt(inner.style.top);//touch結(jié)束后記錄內(nèi)部滑塊滑動(dòng)的位置在全局變量中體現(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事件實(shí)現(xiàn)頁(yè)面上下滑動(dòng)效果【附代碼】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文：http://www.tuicool.com/articles/nIBJju

標(biāo)簽：惠州咸陽(yáng) 營(yíng)口紅河萍鄉(xiāng) 甘南蘇州文山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5 touch事件實(shí)現(xiàn)頁(yè)面上下滑動(dòng)效果【附代碼】》，本文關(guān)鍵詞 html5,touch,事件,實(shí)現(xiàn),頁(yè)面,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。