轉載請注明出處：http://www.cnblogs.com/shamoyuu/p/left_slide_menu.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,user-scalable=no"> 6 <title>左划刪除</title> 7 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> 8 <style type="text/css"> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .animate-slide-start { 15 -webkit-transition: all 0.2s ease-in-out; 16 -moz-transition: all 0.2s ease-in-out; 17 transition: all 0.2s ease-in-out; 18 } 19 20 .animate-slide { 21 -webkit-transform: translate3d(-55px, 0, 0); 22 -moz-transform: translate3d(-55px, 0, 0); 23 transform: translate3d(-55px, 0, 0); 24 } 25 26 .slide-wrapper { 27 width: 100%; 28 height: 60px; 29 overflow: hidden; 30 border-bottom: 1px solid #ccc; 31 } 32 33 .slide-scroll { 34 height: 60px; 35 overflow: hidden; 36 white-space: nowrap; 37 } 38 39 .slide-content-button { 40 width: 55px; 41 height: 60px; 42 } 43 44 .slide-content-button button { 45 width: 100%; 46 height: 100%; 47 border: none; 48 background: #ffe313; 49 color: #1f1f36; 50 } 51 52 .slide-content { 53 float: left; 54 display: inline-block; 55 height: 60px; 56 line-height: 60px; 57 } 58 </style> 59 <script type="text/javascript"> 60 $(function() { 61 //手指滑動多少距離就認為是滑成功 62 //這個值不能太大，否則影響斜着滑動時，垂直滑動的流暢性，也不能太小，太靈敏也不好 63 var diffXDistance = 50; 64 65 //當前滑動的對象 66 var currentObject; 67 //上一次滑動的對象 68 var lastObject; 69 70 //是否可以左右滑動，在上下滑的時候禁止左右滑 71 var canSlide = true; 72 //用於記錄按下的點 73 var startPoint; 74 75 76 $(".slide-content").css({ 77 width: $(".slide-wrapper").width() 78 }); 79 80 $(".slide-scroll").css({ 81 width: $(".slide-wrapper").width() + $(".slide-content-button").width() 82 }) 83 .on('touchstart', function(e) { 84 currentObject = this; 85 86 startPoint = { 87 x: e.originalEvent.changedTouches[0].pageX, 88 y: e.originalEvent.changedTouches[0].pageY 89 }; 90 }) 91 .on('touchmove', function(e) { 92 //如果是左右滑動，就禁止上下的滑動 93 //如果是上下的滑動，就禁止左右滑動 94 if(Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) > Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)) { 95 event.preventDefault(); 96 } else { 97 canSlide = false; 98 } 99 }) 100 .on('touchend', function(e) { 101 //如果是上下滑動，這里就直接返回了 102 if(!canSlide) { 103 canSlide = true; 104 return true; 105 } 106 107 //點擊除當前左滑對象之外的任意其他位置 108 if(lastObject && currentObject != lastObject) { 109 //右滑→ 110 $(lastObject).removeClass("animate-slide"); 111 112 //清空上一個左滑的對象 113 lastObject = undefined; 114 } 115 116 var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x; 117 if(diffX < -diffXDistance) { 118 //左滑← 119 $(currentObject).addClass("animate-slide"); 120 if(lastObject && lastObject != currentObject) { 121 //右滑→ 122 $(lastObject).removeClass("animate-slide"); 123 } 124 //記錄上一個左滑的對象 125 lastObject = currentObject; 126 } else if(diffX >= diffXDistance) { 127 if(currentObject == lastObject) { 128 //右滑→ 129 $(currentObject).removeClass("animate-slide"); 130 //清空上一個左滑的對象 131 lastObject = undefined; 132 } 133 } 134 }); 135 }); 136 </script> 137 </head> 138 139 <body> 140 <div class="slide-wrapper"> 141 <div class="slide-scroll animate-slide-start"> 142 <div class="slide-content"> 143 <div>我是內容</div> 144 </div> 145 <div class="slide-content-button"><button>刪除</button></div> 146 </div> 147 </div> 148 <div class="slide-wrapper"> 149 <div class="slide-scroll animate-slide-start"> 150 <div class="slide-content"> 151 <div>我是內容</div> 152 </div> 153 <div class="slide-content-button"><button>刪除</button></div> 154 </div> 155 </div> 156 <div class="slide-wrapper"> 157 <div class="slide-scroll animate-slide-start"> 158 <div class="slide-content"> 159 <div>我是內容</div> 160 </div> 161 <div class="slide-content-button"><button>刪除</button></div> 162 </div> 163 </div> 164 <div class="slide-wrapper"> 165 <div class="slide-scroll animate-slide-start"> 166 <div class="slide-content"> 167 <div>我是內容</div> 168 </div> 169 <div class="slide-content-button"><button>刪除</button></div> 170 </div> 171 </div> 172 <div class="slide-wrapper"> 173 <div class="slide-scroll animate-slide-start"> 174 <div class="slide-content"> 175 <div>我是內容</div> 176 </div> 177 <div class="slide-content-button"><button>刪除</button></div> 178 </div> 179 </div> 180 <div class="slide-wrapper"> 181 <div class="slide-scroll animate-slide-start"> 182 <div class="slide-content"> 183 <div>我是內容</div> 184 </div> 185 <div class="slide-content-button"><button>刪除</button></div> 186 </div> 187 </div> 188 <div class="slide-wrapper"> 189 <div class="slide-scroll animate-slide-start"> 190 <div class="slide-content"> 191 <div>我是內容</div> 192 </div> 193 <div class="slide-content-button"><button>刪除</button></div> 194 </div> 195 </div> 196 <div class="slide-wrapper"> 197 <div class="slide-scroll animate-slide-start"> 198 <div class="slide-content"> 199 <div>我是內容</div> 200 </div> 201 <div class="slide-content-button"><button>刪除</button></div> 202 </div> 203 </div> 204 <div class="slide-wrapper"> 205 <div class="slide-scroll animate-slide-start"> 206 <div class="slide-content"> 207 <div>我是內容</div> 208 </div> 209 <div class="slide-content-button"><button>刪除</button></div> 210 </div> 211 </div> 212 <div class="slide-wrapper"> 213 <div class="slide-scroll animate-slide-start"> 214 <div class="slide-content"> 215 <div>我是內容</div> 216 </div> 217 <div class="slide-content-button"><button>刪除</button></div> 218 </div> 219 </div> 220 <div class="slide-wrapper"> 221 <div class="slide-scroll animate-slide-start"> 222 <div class="slide-content"> 223 <div>我是內容</div> 224 </div> 225 <div class="slide-content-button"><button>刪除</button></div> 226 </div> 227 </div> 228 <div class="slide-wrapper"> 229 <div class="slide-scroll animate-slide-start"> 230 <div class="slide-content"> 231 <div>我是內容</div> 232 </div> 233 <div class="slide-content-button"><button>刪除</button></div> 234 </div> 235 </div> 236 <div class="slide-wrapper"> 237 <div class="slide-scroll animate-slide-start"> 238 <div class="slide-content"> 239 <div>我是內容</div> 240 </div> 241 <div class="slide-content-button"><button>刪除</button></div> 242 </div> 243 </div> 244 </body> 245 </html>