手机滑动效果探索

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

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

js代码如下图：

 1 $(function(){

 2   var startX,startY,endX,endY,ChangeX,ChangeY,target,scroll,index;

 3   var initY=0,result=0

 4   document.getElementById("playContentContiner").addEventListener("touchstart",touchStart,false)

 5   document.getElementById("playContentContiner").addEventListener("touchmove",touchMove,false)

 6   document.getElementById("playContentContiner").addEventListener("touchend",touchEnd,false)

 7   function touchStart(event){

 8      //event.preventDefault();   

 9      var touch=event.touches[0];

10      startX=touch.pageX;

11      startY=touch.pageY;    

12      initY=result 

13      scroll=$(window).scrollTop()

14   }

15   function touchMove(event){

16             

17      var touchS=event.touches[0]; 

18      target=event.touches[0].target      

19      endX=touchS.pageX;

20      endY=touchS.pageY;

21      ChangeX=endX-startX

22      changeY=endY-startY;     

23      index=$(target).parents("li").index()

24      translate = changeY * 0.8;     

25      //设定缩放参数    

26      // $("#data").text("index="+index)

27      scale = Math.max((1-Math.abs(changeY/312)),0.95)*100;  //设定缩放比例，跟滑动距离相关，如果设定固定值，体验会很差

28      var offset=$("#playContentContiner").children().eq(index-1).offset().top    

29      if(changeY<0){//向上滑动

30          if(index>1){//第一个没有动画

31            if(Math.abs(result)<250){    //设定缓动，手指滑动距离越大，元素滑动越慢，并设定最大滑动距离

32               event.preventDefault();

33               if(Math.abs(changeY)<100){

34                  result=(changeY+initY)/2                        

35               }else if(Math.abs(changeY)>=100&&changeY<200){

36                   result=(changeY+initY)/4                                  

37               }else if(Math.abs(changeY)>=200&&changeY<250){

38                   result=(changeY+initY)/6                                     

39               }else{

40                   return false

41               }    

42               

43               $("#playContentContiner li:lt("+(index-1)+")").css({"width":scale+"%","margin":"0px auto"})//目标元素前面的元素缩放

44               //目标元素后面元素位移

45              // alert($("#playContentContiner div:lt("+index+")").length)

46               $("#playContentContiner li:gt("+(index-2)+")").css({"z-index":"10","-webkit-transform":"translate3d(0," + (result) + "px,0)"})

47               $("#playContentContiner").children().eq(index).addClass("Upshadow")

48             }else{

49               return false

50             }

51          }           

52      }else{//向下滑动

53         if(index<$("#playContentContiner").children().length){

54              if(Math.abs(result)<250){    

55                 event.preventDefault();

56                 if(Math.abs(changeY)<100){

57                    result=(changeY+initY)/2                         

58                 }else if(Math.abs(changeY)>=100&&changeY<200){

59                     result=(changeY+initY)/4                                

60                 }else if(Math.abs(changeY)>=200&&changeY<250){

61                     result=(changeY+initY)/6                                    

62                 }else{

63                     return false

64                 }

65                          

66                 $("#playContentContiner li:gt("+(index-1)+")").css({"width":scale+"%","margin":"0px auto","z-index":"0"})

67                 $("#playContentContiner li:lt("+index+")").css({"z-index":"10","-webkit-transform":"translate3d(0," + (translate) + "px,0)"})

68                 $("#playContentContiner").children().eq(index).addClass("Downshadow")

69              }else{

70                  return false

71              }

72         }

73      }        

74   }

75   function touchEnd(event){

76      //event.preventDefault(); 

77      if(changeY<0){

78          $('body').animate({scrollTop:-changeY+$('body').scrollTop()},500);    

79         $("#playContentContiner li:lt("+index+")").css({"width":"100%","z-index":"0"})    

80         

81         $("#playContentContiner li:gt("+(index-2)+")").css({"-webkit-transform":"translate3d(0,0,0)"})

82         

83         $("#playContentContiner").children().eq(index).removeClass("Upshadow")

84         result=0             

85      }else{

86          $('body').animate({scrollTop:-changeY+$('body').scrollTop()},500);    

87         $("#playContentContiner li:gt("+(index-1)+")").css({"width":"100%","z-index":"0"})

88         $("#playContentContiner li:lt("+(index+1)+")").css({"z-index":"10","-webkit-transform":"translate3d(0,0,0)"})

89         $("#playContentContiner").children().eq(index).removeClass("Downshadow")

90              

91      }    

92   }

93 })