最近做的做那个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 touch事件实现触屏页面上下滑动(一)的更多相关文章

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

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  2. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  3. H5案例分享：移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  4. iphone、ipod Touch、ipad触屏时的js事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  5. 通过html5 touch事件封装手势识别组件

    html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown ...

  6. cocos creator Touch事件应用(触控选择多个子节点)

    最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是一级一级往上冒泡,中间可以阻止 ...

  7. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  8. 引用fastclick.js或使用触屏监听 滑动屏幕报错：解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  9. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

随机推荐

  1. 斐波那契(Fibonacci)数列的七种实现方法

    废话不多说,直接上代码 #include "stdio.h" #include "queue" #include "math.h" usin ...

  2. Mysql数据库中的计数器表实时更新

    如果某个应用中存在计数器,例如网站的总访问量.用户的粉丝数.文件下载数等等.如果相关应用在Mysql数据库的表中保存计数器,在更新计数器的时候可能会碰到并发问题.例如在web应用中,记录网站的点击次数 ...

  3. IOS 基于APNS消息推送原理与实现(JAVA后台)

    Push的原理: Push 的工作机制可以简单的概括为下图 图中,Provider是指某个iPhone软件的Push服务器,这篇文章我将使用.net作为Provider. APNS 是Apple Pu ...

  4. 团队博客作业Week1 Team Homework #3软件工程在北航

    这次我们采访了一位大四的学姐,让她简单地谈了谈去年学习软件工程的经历和感受. 在完成软件工程大作业的过程中,由于计划安排与实际脱节,导致时间前松后紧,平均每周花在这门课上的时间大约有8个小时. 项目完 ...

  5. 原生js实现仿window10系统日历效果

    舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒, ...

  6. WPF解析Fnt字体

    偶遇需要再 WPF中加载Fnt字体,此做... using System; using System.Collections.Generic; using System.Drawing; using ...

  7. asp.net 中给gridview添加自动序号

    第一种方式,直接在Aspx页面GridView模板列中.这种的缺点是到第二页分页时又重新开始了. 代码如下: <asp:TemplateField HeaderText="序号&quo ...

  8. hihocoder #1300 : 展胜地的鲤鱼旗 dp

    题目链接: http://hihocoder.com/problemset/problem/1300 题解: 先用栈预处理出每个‘)’匹配的‘(’的位子,放在pos数组中. dp[i]表示以i结尾的合 ...

  9. Eclipse下PHP开发 插件安装

    PHPeclipse是什么? PHPeclipse是Eclipse的一个插件,它为php开发人员提供了一个集成的开发环境.Eclipse官方下载地址:http://www.eclipse.org/ P ...

  10. uva 11609

    可以想到 答案为 1*C(1,n)+2*C(2,n)+3*C(3,n)+....+n*C(n,n); 由公式 k*C(k,n) = n*C(k-1,n-1) 所以最终答案 n*2^(n-1) 用到快速 ...