开发者社区> frontman> 正文

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

简介: 最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
+关注继续查看

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

下午好生研究了下终于搞出了个比较全面的上下滑动的小demo,代码比较简单。

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

<!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<br>        123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>123<br>      123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>      
        </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>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML5 FormData实现文件上传实例
原文:HTML5 FormData实现文件上传实例 表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。
1327 0
html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 touch事件实现触屏页面上下滑动(一)    今天主要实现了一个效果:页面滑动到最上...
910 0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1891 0
html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
744 0
HTML5 Canvas 实现的9个 Loading 效果
  Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像。更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Loading)加载动画效果。
964 0
5.触摸touch,单点触摸,多点触摸,触摸优先和触摸事件的吞噬
 1 触摸 Coco2dx默认只有CCLayer及其派生类才有触摸的功能。 2 单点触摸 打开触摸开关和触摸方式 setTouchEnabled(true); setTouchMode(kCCTouchesOneByOne); Cocos2dx 对触摸分三布来处理。分是是点触,移动,离开。或是中间被打断。其功能皆有相应的virtual
1213 0
+关注
52
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载