手机滑动效果探索

这几天一直在跟touch事件打交道，各种摸索，结合css3做了一例类似弹簧式的滑动效果。手指滑动时，通过touches数组的target捕捉元素，同时当前元素前面元素进行缩放，该元素及index大于该元素的元素进行translate，

这样会有一种重叠的效果，当手指释放时，通过animate使整体滑动，并将元素状态恢复到最初。

js代码如下图：

$(function(){
  var startX,startY,endX,endY,ChangeX,ChangeY,target,scroll,index;
  var initY=0,result=0
  document.getElementById("playContentContiner").addEventListener("touchstart",touchStart,false)
  document.getElementById("playContentContiner").addEventListener("touchmove",touchMove,false)
  document.getElementById("playContentContiner").addEventListener("touchend",touchEnd,false)
  function touchStart(event){
     //event.preventDefault();   
     var touch=event.touches[0];
     startX=touch.pageX;
     startY=touch.pageY;    
     initY=result 
     scroll=$(window).scrollTop()
  }
  function touchMove(event){
            
     var touchS=event.touches[0]; 
     target=event.touches[0].target      
     endX=touchS.pageX;
     endY=touchS.pageY;
     ChangeX=endX-startX
     changeY=endY-startY;     
     index=$(target).parents("li").index()
     translate = changeY * 0.8;     
     //设定缩放参数    
     // $("#data").text("index="+index)
     scale = Math.max((1-Math.abs(changeY/312)),0.95)*100;  //设定缩放比例，跟滑动距离相关，如果设定固定值，体验会很差
     var offset=$("#playContentContiner").children().eq(index-1).offset().top    
     if(changeY<0){//向上滑动
         if(index>1){//第一个没有动画
           if(Math.abs(result)<250){    //设定缓动，手指滑动距离越大，元素滑动越慢，并设定最大滑动距离
              event.preventDefault();
              if(Math.abs(changeY)<100){
                 result=(changeY+initY)/2                        
              }else if(Math.abs(changeY)>=100&&changeY<200){
                  result=(changeY+initY)/4                                  
              }else if(Math.abs(changeY)>=200&&changeY<250){
                  result=(changeY+initY)/6                                     
              }else{
                  return false
              }    
              
              $("#playContentContiner li:lt("+(index-1)+")").css({"width":scale+"%","margin":"0px auto"})//目标元素前面的元素缩放
              //目标元素后面元素位移
             // alert($("#playContentContiner div:lt("+index+")").length)
              $("#playContentContiner li:gt("+(index-2)+")").css({"z-index":"10","-webkit-transform":"translate3d(0," + (result) + "px,0)"})
              $("#playContentContiner").children().eq(index).addClass("Upshadow")
            }else{
              return false
            }
         }           
     }else{//向下滑动
        if(index<$("#playContentContiner").children().length){
             if(Math.abs(result)<250){    
                event.preventDefault();
                if(Math.abs(changeY)<100){
                   result=(changeY+initY)/2                         
                }else if(Math.abs(changeY)>=100&&changeY<200){
                    result=(changeY+initY)/4                                
                }else if(Math.abs(changeY)>=200&&changeY<250){
                    result=(changeY+initY)/6                                    
                }else{
                    return false
                }
                         
                $("#playContentContiner li:gt("+(index-1)+")").css({"width":scale+"%","margin":"0px auto","z-index":"0"})
                $("#playContentContiner li:lt("+index+")").css({"z-index":"10","-webkit-transform":"translate3d(0," + (translate) + "px,0)"})
                $("#playContentContiner").children().eq(index).addClass("Downshadow")
             }else{
                 return false
             }
        }
     }        
  }
  function touchEnd(event){
     //event.preventDefault(); 
     if(changeY<0){
         $('body').animate({scrollTop:-changeY+$('body').scrollTop()},500);    
        $("#playContentContiner li:lt("+index+")").css({"width":"100%","z-index":"0"})    
        
        $("#playContentContiner li:gt("+(index-2)+")").css({"-webkit-transform":"translate3d(0,0,0)"})
        
        $("#playContentContiner").children().eq(index).removeClass("Upshadow")
        result=0             
     }else{
         $('body').animate({scrollTop:-changeY+$('body').scrollTop()},500);    
        $("#playContentContiner li:gt("+(index-1)+")").css({"width":"100%","z-index":"0"})
        $("#playContentContiner li:lt("+(index+1)+")").css({"z-index":"10","-webkit-transform":"translate3d(0,0,0)"})
        $("#playContentContiner").children().eq(index).removeClass("Downshadow")
             
     }    
  }
})