竖向滑屏

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

  • 移动端，"手指按下"，"手指移动" 两个事件即可（且不需要嵌套），有需要时才使用 "手指离开事件"
  • 滑屏相关事件
  • 给父元素绑定，是为了全屏滑动
  • 开启定位
  • 上滑，下滑范围限定
  • 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. 如何解决Angular网页内嵌推特时间线无法正常显示

    我最近解决了一个折磨了我好久但是解决方法却只是添加两三行代码的问题.我没有在网上找到合适的解决方案,最后是我根据官方网站和很多的帖子里的部分代码得到的启发,尝试了很久之后得到的解决方法.因为过程实在是 ...

  2. 基于ionic4、cordova搭建android开发环境

    前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...

  3. HTML（六）HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  4. word插入公式不自动斜体的解决办法

    1.word-视图-宏 2.自己随便输入一个宏名,比如就叫InsertEqua,然后将 Sub InsertEqua() Selection.OMaths.Add Range:=Selection.R ...

  5. LCA学习笔记

    写在前面 目录 一.LCA的定义 二.暴力法求LCA 三.倍增法求LCA 四.树链剖分求LCA 五.LCA典型例题 题目完成度 一.LCA的定义 LCA指的是最近公共祖先.具体地,给定一棵有根树,若结 ...

  6. Maven 构建浏览器解析userAgent类

    创建Maven项目 添加pom.xml 依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...

  7. pythonのdjango CSRF简单使用

    一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功 ...

  8. 可持久化 trie 的简单入门

    可持久化 $trie$  ....又是一个表里不一的东西..... 可持久化 $trie$  的介绍: 和主席树类似的,其实可持久化就是体现在前缀信息的维护上(搞不懂这怎么就叫做可持久化了...) $ ...

  9. codeforces 1017C - Cloud Computing 权值线段树 差分 贪心

    https://codeforces.com/problemset/problem/1070/C 题意: 有很多活动,每个活动可以在天数为$[l,r]$时,提供$C$个价格为$P$的商品 现在从第一天 ...

  10. 008_ssl Certificate Pinning

    证书锁定Certificate Pinning技术 在中间人攻击中,攻击主机通常截断客户端和服务器的加密通信.攻击机以自己的证书替代服务器发给客户端的证书.通常,客户端不会验证该证书,直接接受该证书, ...