手机滑动效果探索

这几天一直在跟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 })

 

posted @ 2015-06-06 19:04  走在起点  阅读(282)  评论(0)  编辑  收藏  举报