浏览器的动画效果一般都是用js来控制元素的top,left,right,bottom等属性来实现，不过在移动浏览器上，鉴于对css3的支持，完全可以抢先使用css3 translate。不过需要注意的是，使用css translate在android上比较那个啥XX，在safari上，transalte2d的效果远远不如translate3d，所以，移动浏览器上，最好是使用translate3d来实现。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"/> 7 <style type="text/css"> 8 *{margin: 0; padding: 0;} 9 body{ width: 100%;} 10 ul,li{ list-style: none;} 11 input[type="button"]{ margin: 10px; width: 40px; height: 24px;} 12 #page{ text-align: center;} 13 .demo{ width: 100%; height: 200px; overflow: hidden;} 14 .list{} 15 .list li{ display: table-cell; height: 200px; } 16 .list li:first-child{ background: #87ceeb;} 17 .list li:last-child{ background: #8b4513;} 18 </style> 19 </head> 20 <body> 21 <div id="page"> 22 <div class="demo"> 23 <ul class="list"> 24 <li>1</li> 25 <li>2</li> 26 </ul> 27 </div> 28 <div class="demo"> 29 <ul class="list"> 30 <li>3</li> 31 <li>4</li> 32 </ul> 33 </div> 34 </div> 35 <script type="text/javascript"> 36 37 window.TouchSlide = function(container){ 38 if(!container){ //没有外包装，直接返回 39 return 1; 40 } 41 this.container = this._$(container); 42 this.element = this.container.children[0]; 43 this.slides = this.element.children; 44 this.index = 0; 45 this.init(); 46 47 var _this = this; 48 49 this.element.addEventListener('touchstart',function(e){ 50 _this.touchstart(e); 51 },false); 52 this.element.addEventListener('touchmove',function(e){ 53 _this.touchmove(e); 54 },false) 55 this.element.addEventListener('touchend',function(e){ 56 _this.touchend(e); 57 },false) 58 window.addEventListener('resize', function(e){ //缩放屏幕的时候需要动态调整 59 _this.init(); 60 }, false); 61 } 62 TouchSlide.prototype = { 63 constructor : TouchSlide, 64 _$ : function(el){ 65 return 'string' == el ? document.getElementById(id) : el; 66 }, 67 init : function(){ 68 this.container.style.visibility = 'none'; 69 this.width = this.container.getBoundingClientRect().width; 70 this.element.style.width = this.slides.length * this.width + 'px'; 71 var index = this.slides.length; 72 while(index--){ 73 this.slides[index].style.width = this.width + 'px'; 74 } 75 this.container.style.visibility = 'visible'; 76 }, 77 slideTo : function(index, duration) { 78 this.move(0,index,duration); 79 this.index = index; 80 }, 81 move : function(deltaX,index,duration){ 82 var style = this.element.style; 83 style.webkitTransitionDuration = duration + 'ms'; 84 style.webkitTransform = 'translate3d(' + ( deltaX - index * this.width) + 'px,0,0)'; 85 }, 86 isValidSlide : function(){ 87 return Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 //在250ms内滑动的距离超过20px 88 || Math.abs(this.deltaX) > this.width/2 //或者滑动超过容器的一半宽度 89 }, 90 isPastBounds : function(){ 91 return !this.index && this.deltaX > 0 //第一个，但是依旧向右滑动 92 || this.index == this.slides.length - 1 && this.deltaX < 0//最后一个，但是依旧向左滑动，这两种情况越界了，是无效的 93 }, 94 touchstart : function(e){ 95 var touchEvent = e.touches[0]; 96 this.deltaX = 0; 97 this.start = { 98 x : touchEvent.pageX, 99 y : touchEvent.pageY, 100 time : Number(new Date()) 101 } ; 102 this.isScrolling = undefined; 103 this.element.style.webkitTransitionDuration = 0; 104 }, 105 touchmove : function(e){ 106 this.deltaX = e.touches[0].pageX - this.start.x; 107 //判断是左右滑动还是上下滑动，上下滑动的话就无视 108 if(typeof this.isScrolling == 'undefined'){ 109 this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.start.pageY) );//判断是否是是竖直滚动 110 } 111 if(!this.isScrolling){ 112 e.preventDefault(); 113 this.deltaX = this.deltaX / (this.isPastBounds() ? 2 : 1); 114 } 115 this.move(this.deltaX,this.index,0); 116 }, 117 touchend : function(e){ 118 if (!this.isScrolling) { 119 this.slideTo( this.index + ( this.isValidSlide() && !this.isPastBounds() ? (this.deltaX < 0 ? 1 : -1) : 0 ), 200 ); 120 } 121 } 122 } 123 124 Array.prototype.slice.call(document.getElementsByClassName('demo'),0).forEach(function(item){ 125 new TouchSlide(item) 126 }) 127 128 </script> 129 </body> 130 </html>