【前端】jQuery移动端左滑删除
转载请注明出处：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>
