竖向滑屏

元素最终事件 = 元素初始位置 + 手指滑动距离

  • 移动端，"手指按下"，"手指移动" 两个事件即可（且不需要嵌套），有需要时才使用 "手指离开事件"
  • 滑屏相关事件
  • 给父元素绑定，是为了全屏滑动
  • 开启定位
  • 上滑，下滑范围限定
  • 3
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    
        <title>Slide</title>

        <style type="text/css">
    
            * {
    
                padding: 0;
    
                margin: 0;
    
            }

            a {
    
                text-decoration: none;
    
            }

            ul，
    
            ol {
    
                list-style: none;
    
            }

            input {
    
                outline: none;
    
            }

            img {
    
                display: block;
    
            }

            html,
    
            body {
    
                height: 100%;
    
                overflow: hidden;
    
            }

            /**** ****/
    
            #wrap {
    
                width: 100%;
    
                height: 100%;

                font: 14px Helvetica, Arial, sans-serif;
    
                background-color: #96b377;
    
            }

            #content {
    
                position: relative;
    
            }
    
        </style>
    
    </head>

    <body>

        <!--模拟手机屏幕-->
    
        <section id="wrap">
    
            <div id="content">

            </div>
    
        </section>

        <!-- javascript 代码 -->
    
        <script type="text/javascript">
    
            // 取消默认行为
    
            document.addEventListener("touchstart", function(e){
    
                e.preventDefault();
    
            }, false);

            // 点透处理

            // 适配

            var wrap = document.querySelector("#wrap");
    
            var content = document.querySelector("#content");
    
            for(var i=0; i<100; i++){
    
                content.innerHTML += i+"<br />";
    
            };

            console.log("视觉视口"+window.innerWidth+"*"+window.innerHeight);
    
            console.log("布局视口"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight);

            bindEleSlide(content, wrap);

            // 竖向滑屏事件      滑动元素  父元素     回调函数
    
            function bindEleSlide(slideEle, parentEle, callBack){
    
                var oldFingerY = 0;
    
                var oldEleY = 0;

                parentEle.addEventListener("touchstart", function(e){
    
                    finger = e.changedTouches;

                    oldFingerY = finger[0].clientY;
    
                    oldEleY = slideEle.offsetTop;
    
                }, false);

                parentEle.addEventListener("touchmove", function(e){
    
                    finger = e.changedTouches;

                    var newFingerY =  finger[0].clientY;
    
                    var newEleY = oldEleY + (newFingerY - oldFingerY);
    
                    if(newEleY > 0){
    
                        newEleY = 0;
    
                    }else if(newEleY < document.documentElement.clientHeight - slideEle.clientHeight){
    
                        newEleY = document.documentElement.clientHeight - slideEle.clientHeight;
    
                    }

                    slideEle.style.top = newEleY+"px";

                    callBack && callBack();
    
                }, false);
    
            };

        </script>
    
    </body>
    
</html>

mobile_竖向滑屏的更多相关文章

  1. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  2. 【原】移动web滑屏框架分享

    本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成 ...

  3. iOS － 滑屏方案

    参考自:iOS开发- 通过ChildViewCotroller ViewController容器 产品增加新的版面,类似于网易新闻,百度新闻,腾讯新闻等新闻客户端首页多屏幕滑屏切换,找了一些开源代码研 ...

  4. 移动端框架篇-控制子容器的滑屏框架-fullPage.js

    控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...

  5. 移动端框架篇-控制父容器的滑屏框架-slip.js

    设计滑屏框架的办法一般有2种 控制父容器法 控制子容器法 这个算是控制父容器法 通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的 ...

  6. H5案例分享：移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

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

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

  8. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  9. jmSlip WEB前端滑屏组件

    基于css3的滑屏组件 demo: http://slip.jm47.com 下载: https://github.com/jiamao/jmSlip 功能清单 区域横滚 整屏竖滚 滚动动画效果 区域 ...

随机推荐

  1. Regularity criteria for NSE 4: $\p_3u$

    In [Zhang, Zujin. An improved regularity criterion for the Navier–Stokes equations in terms of one d ...

  2. vue使用md5，base64方法

    在前端加密代码虽然对安全没有提高,但是可以避免明文传输,提供用户隐私保护,还是很有必要的. 首先安装js-md5,js-base64. 在vue中引入. 之后就可以直接使用了,一般的做法是先把密码转行 ...

  3. C#任务同步

    using System; using System.Diagnostics; using System.Threading; using System.Threading.Tasks; using ...

  4. js高级知识---词法分析和AO 链

    转载自https://www.cnblogs.com/OceanHeaven/p/4957704.html 上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代 ...

  5. EmbeddedSolrServer的使用与solor6.3.0的使用

    1.    到solr官网下载对应版本的solr: https://lucene.apache.org/solr/ 我下载的是:6.3.0版本(需要JDK8),solr默认集成了jetty容器,而且在 ...

  6. 易度文档管理系统--http://www.everydo.com/

    易度文档管理系统--http://www.everydo.com/ 公司工程技术部门需要,暂收藏.

  7. windows每天备份文件的bat脚本【原创】

    备份昨天文件的脚本 @echo off set yy=%DATE:~,% set mm=%DATE:~,% set ,% ::前一天的日期,格式化输出 ,date)>vbs.vbs for /f ...

  8. 【原创】大叔经验分享（21）yarn中查看每个应用实时占用的内存和cpu资源

    在yarn中的application详情页面 http://resourcemanager/cluster/app/$applicationId 或者通过application命令 yarn appl ...

  9. 小程序生成海报图片(或者原有的)并下载，&&相册授权&&按钮拉起二次授权

    这是自己做小程序生成推广海报,并保存到本地相册的方法,向后台发起请求,返回一个海报图片,下载保存到相册, 如果只是单纯的下载图片代码43行-63行就足够了 如果想直接保存到相册,则不要做downFil ...

  10. Object.freeze(); 方法冻结一个对象。

    Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改: 冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性 ...