touch方向锁定

<!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方向锁定

最新文章

热门文章