<!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. 第三篇：Linux的基本操作与文件管理（纯命令行模式下）（下）

    接上篇介绍完软件的管理(查询.删除.安装)之后,本篇将介绍Linux的文件和目录的管理. 如何浏览Linux的目录(文件夹),就像Windows一样,我们平时需要打开各个目录,去里面找一找曾经悄悄存储 ...

  2. 判断括号是否有效(c++描述)

    开门见山,假设我们有一大串的由'{', '}', '[', ']', '(', ')' 这些括号构成比如像这样的"{[}][()"符号串,我们肉眼当然能看出它是非法的,那么如何使用 ...

  3. 如何使用Kibana

    目录 前言 一.安装 二.加载自定义索引 三.如何搜索数据 四.如何切换中文 五.如何使用控制台 六.可视化图表 七.使用仪表盘 前言 Kibana 是为 Elasticsearch设计的开源分析和可 ...

  4. [转载]Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论

    Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论 转载至:https://www.sdnlab.com/17530.html 我们使用Linux作为服务器操作系统时,为了达到高并发处理 ...

  5. java idea spring mvc 入门 最起码 我8080跑起来了

    IDEA建立Spring MVC Hello World 详细入门教程 https://www.cnblogs.com/wormday/p/8435617.html

  6. gulp常用的插件

    参考地址: http://www.cnblogs.com/1wen/p/5421212.html https://my.oschina.net/wolfx/blog/673905 http://www ...

  7. 6个出色的Kubernetes发行版，哪款最适合你？

    作者简介 Christopher Tozzi,自2008年来以自由职业者的身份对Linux.虚拟化.容器.数据存储及其相关主题进行报道. 本文来自Rancher Labs 时至今日,通过Kuberne ...

  8. Flutter 学习路线图

    Flutter 学习路线图 如果你真的觉得很难,坚持不了了,那就放弃,既然放弃了就不要抱怨没有得到. 选择你热爱的,坚持你选择的,不抱怨放弃的. 前言 Flutter越来越火,学习Flutter的人越 ...

  9. JSFinder：一个在js文件中提取URL和子域名的脚本

    JSFinder介绍 JSFinder是一款用作快速在网站的js文件中提取URL,子域名的脚本工具. 支持用法 简单爬取 深度爬取 批量指定URL/指定JS 其他参数 以往我们子域名多数使用爆破或DN ...

  10. 升级 nop 4.1 Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement.

    Incorrect syntax near 'OFFSET'.  Invalid usage of the option NEXT in the FETCH statement. nop.web 项目 ...