编程 HTML / CSS

html5 touch事件实现触屏页面上下滑动(一)

Posted in HTML / CSS onMarch 10, 2016

最近做的做那个app的项目由于用overflow：hidden导致了很多问题，于是决定研究下html5的touch事件。想找个全面点的帖子很难，虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo，代码比较简单。

下面是完整代码，我把几个重要的地方做了红色标记

XML/HTML Code复制内容到剪贴板

<!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,//触摸时的坐标
startY,
x, //滑动的距离
y,
aboveY=0; //设一个全局变量记录上一次内部块滑动的位置
var inner=document.getElementById("inner");
function touchSatrt(e){//触摸
e.preventDefault();
var touch=e.touches[0];
startY = touch.pageY; //刚触摸时的坐标
}
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"; //这一句中的aboveY是inner上次滑动后的位置
}
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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/leinov/p/3701951.html

html5 touch事件实现触屏页面上下滑动(一)

- Author -

Leinov

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3个性化字体_动力节点Java学院整理

Jul 12 HTML / CSS

CSS3实现同时执行倾斜和旋转的动画效果

Oct 27 HTML / CSS

CSS3制作酷炫的条纹背景

Nov 09 HTML / CSS

CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码

Nov 30 HTML / CSS

HTML5之多线程(Web Worker)

Jan 02 HTML / CSS

网易微博Web App用HTML5开发的过程介绍

Jun 13 HTML / CSS

基于IE10/HTML5 开发

Apr 22 HTML / CSS

HTML中使用SVG与SVG预定义形状元素介绍

Jun 28 HTML / CSS

详解HTML5中的Communication API基本使用方法

Jan 29 HTML / CSS

HTML5 manifest离线缓存的示例代码

Aug 08 HTML / CSS

HTML5 通过Vedio标签实现视频循环播放的示例代码

Aug 05 HTML / CSS

html5移动端禁止长按图片保存的实现

Apr 20 HTML / CSS

html5 touch事件实现触屏页面上下滑动(二)

Mar 10 #HTML / CSS

html5 touch事件实现页面上下滑动效果【附代码】

Mar 10 #HTML / CSS

Html5 postMessage实现跨域消息传递

Mar 11 #HTML / CSS

html5 canvas实现跟随鼠标旋转的箭头

Mar 11 #HTML / CSS

HTML5如何实现元素拖拽

Mar 11 #HTML / CSS

Android本地应用打开方法——通过html5写连接

Mar 11 #HTML / CSS

利用简洁的图片预加载组件提升html5移动页面的用户体验

Mar 11 #HTML / CSS