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