<!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. idea最下方视图中没有spring框解决方法

    之前遇到过idea打开一个项目后,如图所示的spring视图框消失不见了. 并且view-Tool windows里面也找不到的问题;因为没有这个的话还挺烦的,网上搜了好久都没有资料,所以记录一下; ...

  2. yolo3各部分代码详解（超详细）

    0.摘要 最近一段时间在学习yolo3,看了很多博客,理解了一些理论知识,但是学起来还是有些吃力,之后看了源码,才有了更进一步的理解.在这里,我不在赘述网络方面的代码,网络方面的代码比较容易理解,下面 ...

  3. 关于adsl vps 拨号ip服务器

    我这几天写了一遍在xp上的文章,但是因为xp上貌似只能使用squid2.6版本的,tinyproxy也不能用,而且怎么弄不出去vps端的端口出来 https://www.cnblogs.com/zen ...

  4. 【11】openlayers 地图交互

    地图交互interaction 关于map的方法: //添加地图交互 map.addInteraction(interaction) //删除地图交互 map.removeInteraction(in ...

  5. （转）C++对象的内存布局

    原文地址:http://blog.csdn.net/haoel/article/details/3081328 C++ 对象的内存布局 陈皓 http://blog.csdn.net/haoel 前言 ...

  6. 增删改查-java（新手）

     PreparedStatement: 方法: Connection: 方法:  实例: 1.查询: package cn.chuang.JdbcDome; import java.sql.*; pu ...

  7. ijkplayer中遇到的问题汇总

    在做音频播放的时候,很多公司使用的是开源的ijkplayer播放器,ijkplayer底层是基于ffmpeg,在某机型上面可能常常遇到各种问题.今天整理了大家在使用ijkplayer中遇到的问题,以及 ...

  8. spring单例bean是线程安全的吗？

    如果在你不定义成员变量的情况下,spring默认是线程安全的 否则,设置scope="prototype"

  9. GitHub 热点速览 Vol.13：近 40k star 计算机论文项目再霸 GitHub Trending 榜

    作者:HelloGitHub-小鱼干 摘要:"潮流是个轮回",这句话用来形容上周的 GitHub Trending 最贴切不过.无论是已经获得近 40k 的高星项目 Papers ...

  10. 手把手教你学Git

    Git 使用手册独家实战 0.查看本机公钥 步骤: 1.进入.ssh目录 cd ~/.ssh 2.找到id_rsa.pub文件 ls / ll 3.查看文件 cat id_rsa.pub JackFe ...