触屏开发技巧之——左右滑动导航

今天来说一个小技巧，相信现在有很多程序员会考虑到触屏开发，毕竟现在的触屏设备这么多。

首先，你需要一点js的知识，不需要很牛，因为我也是个js菜鸟。这段代码也从别的地方看来修改的，刚好符合需要。

话不多说，上个实例。

上面这个页面中的导航是可以左右滑动的。

布局的话相信对于css的人来说是不难的。

<!--导航部分-->
    <div id="warp" class="warp">
        <div id="inner" class="inner">
            <a href= "#">首页</a>
            <a href= "#">MV</a>
            <a href= "#">悦单</a>
            <a href= "#">V榜</a>
            <a href= "#">节目</a>
            <a href= "#">音乐stage</a>
            <a href= "#">APP下载</a>
            <a href= "#">饭团</a>
            <a href= "#">商城</a>     
            <a href= "#">资讯</a>
            <a href= "#">我的家</a>
        </div>
    </div>
    <!--导航部分-->

其实很简单，一个外容器，一个子容器，子容器里放导航，css相信看了布局就晓得是什么 情况了。

 .warp{width:100%; max-width: 480px; margin: 0 auto; height: 50px; background: #EEE; overflow: hidden; border-bottom: 1px solid #CCC; clear:both;}
      .inner{ line-height: 50px; width:630px;  height: 50px; position: relative; overflow:hidden;}
      .inner a{display: block;padding: 0 10px; float: left; font-size:18px;}

其中注意的是inner的定位position: relative;是相对定位。

有了以上的基础，就是需要写js部分了，先说下如何调用这个函数。

 //横向滑动导航
 var h1 = new horizontalMove({
              innerId: "#inner",
              warpId : "#warp",
              speed: 0.5
          });        

是不是非常简单，其中innerId，就是容器的di，warpId就是父容器的id，speed参数可以自己调试一下，注意speed是0到1的。

现在开始上源码了

/*
================================    
调用方法
horizontalMove({
    innerId: innerId,//滑动元素id 如"#inner"
    warpId: warpId,  //滑动元素外围容器id 如"#warp"
    speed:speed      //滑动参数0-1 0滑动幅度越小，1滑动幅度越大
    });
================================
*/    
    function horizontalMove(options){
              //初始化数据
              var speed = 0.5;  
             var startX;//触摸时的X坐标
             var x = 0;//X轴滑动的距离
              var aboveX=0; // 设一个全局变量记录上一次内部块滑动的位置

              options = options ||{}
              speed = options.speed;
              
              if(options.innerId&&options.warpId){
           var documentWidth=$(options.innerId).width();//内部滑动模块的高度
           var wapperWidth=$(options.warpId).width(); //外部框架的高度
           var inner=$(options.innerId);
           var warp = $(options.warpId)[0]
 
             function touchStart(e){//触摸开始
                 e.preventDefault();
                 var touch=e.touches[0];
                 startX = touch.pageX;   //刚触摸时的坐标                       
             }
 
             function touchMove(e){//滑动
                  e.preventDefault();
                 var  touch = e.touches[0];               
                  x = touch.pageX - startX;//滑动的距离 
                  inner.css({left:aboveX+x*speed});  
             }  
 
             function touchEnd(e){//手指离开屏幕                         
                  aboveX=parseInt(inner.css("left"));//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;
                   if(x>0&&aboveX>0){//当滑动到最顶端时候不能再网上滑动
                       //inner.style.top=0;
                        inner.animate({left:0},200);
                        aboveX=0;
                     } 
                   
                   if(x<0&&(aboveX<(-(documentWidth-wapperWidth)))){//当滑动到最底部时候不能再网下滑动
                     // inner.style.top=-(documentHeight-wapperHeight)+"px";
                       inner.animate({left:-(documentWidth-wapperWidth)},200);
                      aboveX=-(documentWidth-wapperWidth);
                   } 
             }//
              warp.addEventListener('touchstart', touchStart,false);  
              warp.addEventListener('touchmove', touchMove,false);  
              warp.addEventListener('touchend', touchEnd,false);  

          }
          
          
 }

          

代码注释相信是很清楚的，其实就是touch事件的应用。如果你是js大牛，非常希望能跟跟你们学习。