竖向滑屏

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

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

    一:传统错误处理机制(C中通过函数返回来处理) int CalcRes(int n, int m, char ch, int& res) { ; switch (ch) { case '+': ...

  2. LFYZ-OJ ID: 1021 邮票问题

    邮票问题 Problem Description 设有已知面额的邮票m种,每种有n张,用总数不超过n张的邮票,能从面额1开始,最多连续组成多少面额.(1≤m≤100,1≤n≤100,1≤邮票面额≤25 ...

  3. JAVA IO练习

     停车场有进场和出场的功能1. 进场时:采用键盘录入的方式,录入汽车的品牌.颜色.车牌号. 把品牌.颜色.车牌号,以及进场时间写入car.txt文件中. 2. 出场时:键盘录入车牌号,去文件中查找该车 ...

  4. sqlalchemy查询结果类型简析

    Sqlalchemy的查询方式有很多种,例如可以查询全部,可以查询符合条件的,可以查询指定字段的.那么这么多种查询,返回的结果是不是一样的呢?作本文记录分析结果. Sql_forengin.py #c ...

  5. 前端面试题整理—jQuery篇

    1.为什么使用jquery,他有哪些好处? 1)轻量级.代码简洁 2)强大的选择器,出色的DOM操作封装 3)有可靠的事件处理机制 4)浏览器兼容性好 5)支持链式操作 6)支持丰富的插件 2.jqu ...

  6. Java线程安全队列BlockingQueue

    线程安全队列BlockingQueue 用法跟普通队列没有区别,只是加入了多线程支持. 这里主要说说add和put,以及poll和take的区别: add和put都是用来忘队列里面塞东西的,而poll ...

  7. 【汇总目录】Python

    跟廖雪峰老师学Python笔记 [2019年03月29日] 匿名函数 [2019年03月25日] 返回函数与闭包 [2019年03月25日] sorted [2019年03月25日] filter [ ...

  8. Centos7 安装 jdk 1.8

    Centos7 安装 jdk 1.8 1.下载安装包 链接: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloa ...

  9. 基于 Webhooks gitlab 自动化构建

    基于gitlab webhooks 自动构建流程 1.服务器安装 git 服务 安装成功 配置 PHP 脚本: <?php // 接受头部信息 if (!isset($_GET['youpara ...

  10. 肺结节CT影像特征提取（三）——肺结节CT影像特征提取系统软件设计

    肺结节的特征提取在临床中有着重要应用,在上篇文章已经对肺结节的基本特征和CT影像特征提取算法有了介绍,提出了三类肺结节CT影像特征提取算法.本文重点介绍肺结节CT影像特征提取系统的功能介绍及使用,利用 ...