竖向滑屏

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

  • 移动端，"手指按下"，"手指移动" 两个事件即可（且不需要嵌套），有需要时才使用 "手指离开事件"
  • 滑屏相关事件
  • 给父元素绑定，是为了全屏滑动
  • 开启定位
  • 上滑，下滑范围限定
  • 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. ZooKeeper-客户端命令 zkCli

    执行 bin/zkCli 文件进入客户端 查看帮助 help ZooKeeper -server host:port cmd args stat path [watch] set path data ...

  2. Spring Cloud使用样例

    Spring Cloud Demo 项目地址:https://github.com/hackyoMa/spring-cloud-demo 组件 基于Spring Boot 2.0.4.Spring C ...

  3. js检测移动设备并跳转到相关适应页面。

    PS:网页自适应的方式有多种.有通过CSS样式表来实现自适应(主流),也有通过显示不同的页面来实现的方式. 下面代码是记录通过判断设备特征来跳转到相关的页面的方法. 实现要求: 当手机,平板访问 a. ...

  4. Mysql的多种安装方法———rpm安装

    下载地址 搜狐镜像:http://mirrors.sohu.com/mysql 官方网址:https://dev.mysql.com/downloads/mysql/ 一.rpm安装方式 从下载地址下 ...

  5. Django小技巧——使用package管理app

    在一个学习视频上看见的小技巧,遂记录下来. 1. 如下图所示,项目中有多个app,本技巧要解决的问题是集中管理这多个app,将其放入一个package下集中管理,改善项目的视图环境 2. 建立一个pa ...

  6. auto类型说明符

    auto让编译器通过出初始值来推算变量的类型,显然,auto定义的变量必须有初始值: //由val1和val2相加的结果可以推断出item的类型 auto item = val1 + val2;//i ...

  7. 剑指Offer编程题1——二维数组中的查找

    剑指Offer编程题1---------------二维数组中的查找 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完 ...

  8. EF的三种数据加载方式

    EF的关联实体加载有三种方式:Lazy Loading,Eager Loading,Explicit Loading,其中Lazy Loading和Explicit Loading都是延迟加载. (一 ...

  9. activiti 涉及的内容

    1 JAVA 委派模式(Delegate) https://blog.csdn.net/mayaofr/article/details/52082665 2 Activiti中的activiti:ex ...

  10. 《剑指offer》丑数

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结: