<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="width=device-width">

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

    .box {width:200px; height:200px; background:#CCC; transform:translate(0px,0px);}

    </style>

    <script>

    window.onload=function (){

      let oBox=document.getElementsByClassName('box')[0];

      let x=0,y=0;

      oBox.addEventListener('touchstart', function (ev){

        let dir='';

        let disX=ev.targetTouches[0].clientX-x;

        let disY=ev.targetTouches[0].clientY-y;

        let startX=ev.targetTouches[0].clientX;

        let startY=ev.targetTouches[0].clientY;

        function fnMove(ev){

          if(dir==''){

            //等待方向确定——用户超出5px

            if(Math.abs(ev.targetTouches[0].clientX-startX)>=5){

              dir='x';

            }else if(Math.abs(ev.targetTouches[0].clientY-startY)>=5){

              dir='y';

            }

          }else{

            if(dir=='x'){

              x=ev.targetTouches[0].clientX-disX;

            }else if(dir=='y'){

              y=ev.targetTouches[0].clientY-disY;

            }

            oBox.style.transform=`translate(${x}px,${y}px)`;

          }

        }

        function fnEnd(){

          oBox.removeEventListener('touchmove', fnMove, false);

          oBox.removeEventListener('touchend', fnEnd, false);

        }

        oBox.addEventListener('touchmove', fnMove, false);

        oBox.addEventListener('touchend', fnEnd, false);

      }, false);

    };

    </script>

  </head>

  <body>

    <div class="box">

    </div>

  </body>

</html>

targetTouches vs touches
1.兼容

跟按下的位置相比，如果横向移动超过5px，锁定为水平；如果纵向移动超过5px，锁定为垂直
1.阶段一、方向确定之前——压根不动
2.阶段二、方向已经确定了，再动

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <meta name="viewport" content="width=device-width">

    <style media="screen">

    * {margin:0; padding:0; list-style:none;}

    html {font-size:10px}

    header {width:48rem;height:5.5rem;background:#fe5400; overflow:hidden; position:relative; z-index:99;}

    header h1 {width:4.4rem; height:3.7rem; background:url(img/logo.png) no-repeat; text-indent:-9999rem; background-size:100% 100%; margin-left:0.6rem; margin-top:1rem;}

    /*banner*/

    .banner {width:48rem; height:15rem; position:relative; overflow:hidden;}

    .banner ul {width:999rem; height:15rem; overflow:hidden; transform:translateX(-48rem);}

    .banner ul li {width:48rem; height:15rem; float:left;}

    .banner ul li img {width:100%; height:100%;}

    .banner ol {position: absolute; right:0; bottom: 1.3rem;}

    .banner ol li {width:1rem; height:1rem; border:1px solid #333; background:white; border-radius:50%; margin:0 0.4rem; opacity:0.6; float:left;}

    .banner ol li.active {background:#ff5501; border:1px solid #d0a793; opacity:1}

    /**/

    .page_content {background:white; position:relative; top:-5rem;}

    .load {height:5rem; line-height:5rem; text-align:center; font-size:2rem;}

    </style>

    <script>

    window.onresize=function (){

      document.documentElement.style.fontSize=document.documentElement.clientWidth/48+'px';

    };

    window.onresize();

    window.onload=function (){

      let oBanner=document.querySelector('.banner');

      let oBannerUl=oBanner.children[0];

      let oBannerUlLi=oBannerUl.children;

      let oPageContent=document.querySelector('.page_content');

      let oLoad=document.querySelector('.load');

      let aOlLi=document.querySelectorAll('.banner ol li');

      //

      oBannerUl.appendChild(oBannerUlLi[0].cloneNode(true));

      oBannerUl.insertBefore(oBannerUlLi[oBannerUlLi.length-2].cloneNode(true), oBannerUlLi[0]);

      let x=-oBannerUlLi[0].offsetWidth,y=0;

      oBanner.addEventListener('touchstart', function (ev){

        oPageContent.style.transition='none';

        oBannerUl.style.transition='none';

        let startX=ev.targetTouches[0].clientX;

        let startY=ev.targetTouches[0].clientY;

        let disX=startX-x;

        let disY=startY-y;

        let dir='';

        function fnMove(ev){

          if(dir==''){

            if(Math.abs(ev.targetTouches[0].clientX-startX)>=5){

              dir='x';

            }else if(Math.abs(ev.targetTouches[0].clientY-startY)>=5){

              dir='y';

            }

          }else{

            if(dir=='x'){

              x=ev.targetTouches[0].clientX-disX;

            }else{

              y=ev.targetTouches[0].clientY-disY;

            }

            oBannerUl.style.transform=`translateX(${x}px)`;

            if(y>0){

              oPageContent.style.transform=`translateY(${y/3}px)`;

              if(y>200){

                oLoad.innerHTML='松手';

              }else{

                oLoad.innerHTML='下拉刷新';

              }

            }else{

              oPageContent.style.transform=`translateY(${y}px)`;

            }

          }

        }

        function fnEnd(){

          oBanner.removeEventListener('touchmove', fnMove, false);

          oBanner.removeEventListener('touchend', fnEnd, false);

          if(y>0){

            y=0;

            oPageContent.style.transition='0.3s all ease';

            oPageContent.style.transform=`translateY(0px)`;

          }

          //

          let n=Math.round(-x/oBannerUl.children[0].offsetWidth);

          x=-n*oBannerUl.children[0].offsetWidth;

          console.log(n, oBannerUlLi.length);

          if(n==oBannerUlLi.length-1){

            x=-oBannerUlLi[0].offsetWidth;

            oBannerUl.style.transition='';

            oBannerUl.style.transform=`translateX(${x}px)`;

            n=1;

            Array.from(aOlLi).forEach((li,index)=>{

              li.className=index==0?'active':'';

            })

            return

          }else if(n==0){

            x=-(oBannerUlLi.length-2)*oBannerUlLi[0].offsetWidth;

            oBannerUl.style.transition='';

            oBannerUl.style.transform=`translateX(${x}px)`;

            n=oBannerUlLi.length-1;

            Array.from(aOlLi).forEach((li,index)=>{

              li.className=index==oBannerUlLi.length-2?'active':'';

            })

            return

          }

          oBannerUl.style.transition='0.3s all ease';

          oBannerUl.style.transform=`translateX(${x}px)`;

          Array.from(aOlLi).forEach((li,index)=>{

            li.className=index==n?'active':'';

          })

        }

        oBanner.addEventListener('touchmove', fnMove, false);

        oBanner.addEventListener('touchend', fnEnd, false);

      }, false);

    };

    </script>

  </head>

  <body>

    <header>

      <h1>淘宝网</h1>

    </header>

    <div class="load">

      下拉刷新

    </div>

    <div class="page_content">

      <section class="banner">

        <ul>

          <li><img src="img/banner1.jpg" /></li>

          <li><img src="img/banner2.jpg" /></li>

          <li><img src="img/banner1.jpg" /></li>

          <li><img src="img/banner2.jpg" /></li>

          <li><img src="img/banner1.jpg" /></li>

          <li><img src="img/banner2.jpg" /></li>

        </ul>

        <ol>

          <li class="active"></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

        </ol>

      </section>

      <nav>

      </nav>

    </div>

  </body>

</html>

touch方向锁定的更多相关文章

  1. IONIC屏幕方向锁定

    如果希望阻止app在设备旋转时发生横屏,可以使用这个插件: cordova plugin add cordova-plugin-screen-orientation // set to either ...

  2. iOS如何用代码控制以不同屏幕方向打开新页面？

    转载:http://blogread.cn/it/article/7765?f=wb#original 代码示例:https://github.com/johnlui/Swift-On-iOS/tre ...

  3. UI: 概述, 启动屏幕, 屏幕方向

    UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" x ...

  4. 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向

    [源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd 介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏 ...

  5. iOS开发常见BUG和一些小技巧（ps:耐心看完，很实用）

    [385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright ...

  6. iOS开发中遇到的一些问题及解决方案【转载】

    iOS开发中遇到的一些问题及解决方案[转载] 2015-12-29 [385][scrollView不接受点击事件,是因为事件传递失败] // //  MyScrollView.m //  Creat ...

  7. iscroll源码初涉

    最近尝试做web app时候,用上了神器iScroll,鉴于功力尚浅,并没有完全用好神器,所以今天特意来认真学习! 翻开官网,目前的版本是5,但是相关的文章并不多,具体的文件版本是: iscroll. ...

  8. iscroll-lite.js源码注释

    /*! iScroll v5.1.2 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */ (function (window, ...

  9. linux命令汇总1

    允许非root用户使用“sudo” root身份登录系统,执行“visudo”,根据示例添加新的一个规则(记住输入的密码是当前用户密码,而不是root密码)#不需要密码执行sudo命令hadoop   ...

随机推荐

  1. javascript入门进阶（一）

    javascript 入门进阶 这里主要讲解一下在入门阶段很难注意的一些知识点,不一定有用.但是会了总比不会强. 1.HTML为<script>标签准备的6个属性: -async:可选.表 ...

  2. Linux apache开启虚拟主机伪静态.htaccess

    打开apache配置文件 /etc/httpd/conf/httpd.conf 查找“#LoadModule rewrite_module modules/mod_rewrite.so” 去掉前面的# ...

  3. 硬核数据结构，让你从B树理解到B+树

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是周五分布式系统的第八篇文章,核心内容是B+树的原理. 今天的文章是上周B树的延伸,所以新关注的或者是有所遗忘的同学建议先从下方链接回顾 ...

  4. 有关于python内置函数exec和eval一些见解笔记

    eval是将函数内的字符串以计算式的方式进行计算并给与外部一个值. 例: a=eval('1+1') print(a) >>>>2 但是如果出现在函数内部字符串中进行赋值会抛出 ...

  5. Java多线程并发04——合理使用线程池

    在此之前,我们已经了解了关于线程的基本知识,今天将为各位带来,线程池这一技术.关注我的公众号「Java面典」了解更多 Java 相关知识点. 为什么使用线程池?线程池做的工作主要是控制运行的线程的数量 ...

  6. STM32 初学不知道外设对应的APB1还是APB2

    STM32参考手册搜索“系统架构”或者“系统结构”,即可查看外设挂在哪个时钟下,也就知道开启哪个时钟了.

  7. HTTP 与 HTTPS 的区别以及 HTTPS 建立连接的过程

    HTTP 与 HTTPS 区别 HTTP 明文传输,数据都是未加密的,安全性较差,HTTPS(SSL+HTTP) 数据传输过程是加密的,安全性较好. 使用 HTTPS 协议需要到 CA(Certifi ...

  8. VsCode代码段添加方法

    VsCode代码段添加方法 我们在编写代码的过程中,常常会遇到一些固定的结构或常用的处理方法. 编写耗费时间尽力,这时我们想到了添加代码段功能,帮助我们快速的完成编写. 下面以VsCode为例子: 我 ...

  9. iOS 指纹认证登陆开发(TouchID)

    设计思路 TouchID 关联账号 用户登陆成功 -> 开启TouchID登陆 -> TouchID验证 -> 记录用户信息(验证通过) -> 关联完成 TouchID 登陆 ...

  10. android 练习效果（界面一）