竖向滑屏

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

  • 移动端，"手指按下"，"手指移动" 两个事件即可（且不需要嵌套），有需要时才使用 "手指离开事件"
  • 滑屏相关事件
  • 给父元素绑定，是为了全屏滑动
  • 开启定位
  • 上滑，下滑范围限定
  • 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. Spring IOC容器对bean的生命周期进行管理的过程

    1.通过构造器或者工厂方法创建bean的实例 2.为bean的属性设置值和对其他bean的引用 3.将bean的实例传递给bean的后置处理器BeanPostProcessor的postProcess ...

  2. MySQL5.6.39修改密码

    5.6.39 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) step2: 进入终端输入:cd /usr/local ...

  3. js中escape对应的C#解码函数 UrlDecode

    js中escape对应的C#解码函数 System.Web.HttpUtility.UrlDecode(s),使用过程中有以下几点需要注意   js中escape对应的C#解码函数 System.We ...

  4. JSON 之 SuperObject(11): TSuperTableString、TSuperAvlEntry

    JSON 之 SuperObject(11): TSuperTableString.TSuperAvlEntry - 万一 - 博客园http://www.cnblogs.com/del/archiv ...

  5. DDoS的类型及原理

    1.DDoS攻击: DDOS(Distributed Denial of Service),又称分布式拒绝服务攻击.骇客通过控制多个肉鸡或服务器组成的僵尸网络,对目标发送大量看似合法请求,从而占用大量 ...

  6. Pycharm工具导入requests包（python新手）

    在学习使用python的过程中选择了工具Pycharm,但是如下代码: ,起初导包一直报错,解决办法:File->Setting 点击右上角+号,打开搜素对话框 搜素需要的导包,并加入即可解决此 ...

  7. python 的生成器，yield的使用

    生成器 :含有yield 的关键字的函数就是一个生成器. 生成器的运行原理:调用函数时,当函数运行到yield时停止,返回值,下次调用时,就从这次的yield出继续执行,局部变量还是使用这次变量的值. ...

  8. POJ 3347 Kadj Squares （计算几何）

    题目: Description In this problem, you are given a sequence S1, S2, ..., Sn of squares of different si ...

  9. 转 -Filebeat + Redis 管理 LOG日志实践

    Filebeat + Redis 管理 LOG日志实践 小赵营 关注 2019.01.06 17:52* 字数 1648 阅读 24评论 0喜欢 2 引用 转载 请注明出处 某早上,领导怒吼声远远传来 ...

  10. SpringBoot图片上传(四) 一个input上传N张图，支持各种类型

    简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...