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

ttx9n · 发表于 2016-3-10 16:23:59

下面小编就为大家带来一篇html5 touch事件实现页面上下滑动效果【附代码】。小编觉得挺不错的，现在分享给大家。一起过来看看吧，给大家一个参考

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

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"; //这一句中的
}
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

kwa3hgmjp · 发表于 2022-8-19 07:33:12

借款金额看了就立刻

plvo189 · 发表于 2022-8-26 10:05:00

数据库了多久撒快乐的健身卡啦

kwzc65wdj · 发表于 2022-10-31 02:36:45

而快乐你们快乐马年快乐

kestlhoxn · 发表于 2023-8-31 05:28:33

好东西一定要看看！

dm00ji1s · 发表于 2023-9-11 05:29:19

而非为吾问无为谓娃娃

wqpa63gz · 发表于 2023-11-30 22:23:10

我要金豆金豆金豆

黑白键 · 发表于 2024-5-2 03:19:33

论坛有你更精彩！

额呵呵 · 发表于 2024-5-11 05:04:07

额UI废物iuhfujewfiewnnfen

nwk53kbd · 发表于 2024-6-12 17:10:39

笑纳了老板

账号		自动登录	找回密码
密码			立即注册

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

相关帖子