左右滑动事件，左划出现删除按钮，右滑隐藏
先看效果图：
参考了别人写的demo做了修改，参考地址：https://github.com/Orange1991/demos-in-sfg.name/tree/14eeaec62f2cba35ec42666080484f9647902d72
做了修改的测试代码：
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>左划出现删除按钮，右滑隐藏</title> 7 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 8 <script type="text/javascript"> 9 function init() { 10 11 // 设定每一行的宽度=屏幕宽度+按钮宽度 12 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width()); 13 // 设定常规信息区域宽度=屏幕宽度 14 $(".line-normal-wrapper").width($(".line-wrapper").width()); 15 // 设定文字部分宽度（为了实现文字过长时在末尾显示...） 16 $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280); 17 18 // 获取所有行，对每一行设置监听 19 var lines = $(".line-normal-wrapper"); 20 var len = lines.length; 21 var lastX, lastXForMobile; 22 23 // 用于记录被按下的对象 24 var pressedObj; // 当前左滑的对象 25 var lastLeftObj; // 上一个左滑的对象 26 27 // 用于记录按下的点 28 var start; 29 30 // 网页在移动端运行时的监听 31 for(var i = 0; i < len; ++i) { 32 lines[i].addEventListener('touchstart', function(e) { 33 lastXForMobile = e.changedTouches[0].pageX; 34 pressedObj = this; // 记录被按下的对象 35 36 // 记录开始按下时的点 37 var touches = event.touches[0]; 38 start = { 39 x: touches.pageX, // 横坐标 40 y: touches.pageY // 纵坐标 41 }; 42 }); 43 44 lines[i].addEventListener('touchmove', function(e) { 45 // 计算划动过程中x和y的变化量 46 var touches = event.touches[0]; 47 delta = { 48 x: touches.pageX - start.x, 49 y: touches.pageY - start.y 50 }; 51 52 // 横向位移大于纵向位移，阻止纵向滚动 53 if(Math.abs(delta.x) > Math.abs(delta.y)) { 54 event.preventDefault(); 55 } 56 }); 57 58 lines[i].addEventListener('touchend', function(e) { 59 if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 60 $(lastLeftObj).animate({ 61 marginLeft: "0" 62 }, 500); // 右滑 63 lastLeftObj = null; // 清空上一个左滑的对象 64 } 65 var diffX = e.changedTouches[0].pageX - lastXForMobile; 66 if(diffX < -150) { 67 $(pressedObj).animate({ 68 marginLeft: "-132px" 69 }, 500); // 左滑 70 lastLeftObj && lastLeftObj != pressedObj && 71 $(lastLeftObj).animate({ 72 marginLeft: "0" 73 }, 500); // 已经左滑状态的按钮右滑 74 lastLeftObj = pressedObj; // 记录上一个左滑的对象 75 } else if(diffX > 150) { 76 if(pressedObj == lastLeftObj) { 77 $(pressedObj).animate({ 78 marginLeft: "0" 79 }, 500); // 右滑 80 lastLeftObj = null; // 清空上一个左滑的对象 81 } 82 } 83 }); 84 } 85 86 // 网页在PC浏览器中运行时的监听 87 for(var i = 0; i < len; ++i) { 88 $(lines[i]).bind('mousedown', function(e) { 89 lastX = e.clientX; 90 pressedObj = this; // 记录被按下的对象 91 }); 92 93 $(lines[i]).bind('mouseup', function(e) { 94 if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 95 $(lastLeftObj).animate({ 96 marginLeft: "0" 97 }, 500); // 右滑 98 lastLeftObj = null; // 清空上一个左滑的对象 99 } 100 var diffX = e.clientX - lastX; 101 if(diffX < -150) { 102 $(pressedObj).animate({ 103 marginLeft: "-132px" 104 }, 500); // 左滑 105 lastLeftObj && lastLeftObj != pressedObj && 106 $(lastLeftObj).animate({ 107 marginLeft: "0" 108 }, 500); // 已经左滑状态的按钮右滑 109 lastLeftObj = pressedObj; // 记录上一个左滑的对象 110 } else if(diffX > 150) { 111 if(pressedObj == lastLeftObj) { 112 $(pressedObj).animate({ 113 marginLeft: "0" 114 }, 500); // 右滑 115 lastLeftObj = null; // 清空上一个左滑的对象 116 } 117 } 118 }); 119 } 120 } 121 122 $(function() { 123 init(); 124 var pageNum = 1; 125 126 function GetListPageFun() { //请求获取数据 127 var html = []; 128 for(var i = 0; i < 15; i++) { 129 html[i] = '<div class="line-wrapper"><div class="line-scroll-wrapper"><div class="line-normal-wrapper"><div class="line-normal-left-wrapper"><div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div><div class="line-normal-info-wrapper"> <div class="line-normal-user-name">蜡笔小新</div><div class="line-normal-msg">在同行的小伙伴中提到了你</div><div class="line-normal-time">1分钟前</div></div></div><div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div></div><div class="line-btn-delete"><button>删除</button></div></div></div>'; 130 } 131 $("#data").append(html.join("")) 132 } 133 $(window).scroll(function() { //分页 134 if($(window).scrollTop() + $(window).height() >= $(document).height() - 30) { //滚动到底部时 135 pageNum += 1; 136 GetListPageFun(); 137 init(); 138 } 139 }); 140 141 }); 142 </script> 143 144 <script type="text/javascript"> 145 </script> 146 <style type="text/css"> 147 * { 148 margin: 0; 149 padding: 0; 150 } 151 152 .line-wrapper { 153 width: 100%; 154 height: 144px; 155 overflow: hidden; 156 font-size: 28px; 157 border-bottom: 1px solid #aaa; 158 } 159 160 .line-scroll-wrapper { 161 white-space: nowrap; 162 height: 144px; 163 clear: both; 164 } 165 166 .line-btn-delete { 167 float: left; 168 width: 132px; 169 height: 144px; 170 } 171 172 .line-btn-delete button { 173 width: 100%; 174 height: 100%; 175 background: red; 176 border: none; 177 font-size: 24px; 178 font-family: 'Microsoft Yahei'; 179 color: #fff; 180 } 181 182 .line-normal-wrapper { 183 display: inline-block; 184 line-height: 100px; 185 float: left; 186 padding-top: 10px; 187 padding-bottom: 10px; 188 } 189 190 .line-normal-icon-wrapper { 191 float: right; 192 width: 120px; 193 height: 120px; 194 margin-right: 12px; 195 } 196 197 .line-normal-icon-wrapper img { 198 width: 120px; 199 height: 120px; 200 } 201 202 .line-normal-avatar-wrapper { 203 width: 100px; 204 height: 124px; 205 float: left; 206 margin-left: 12px; 207 } 208 209 .line-normal-avatar-wrapper img { 210 width: 92px; 211 height: 92px; 212 border-radius: 60px; 213 } 214 215 .line-normal-left-wrapper { 216 float: left; 217 overflow: hidden; 218 } 219 220 .line-normal-info-wrapper { 221 float: left; 222 margin-left: 10px; 223 } 224 225 .line-normal-user-name { 226 height: 28px; 227 line-height: 28px; 228 color: #4e4e4e; 229 margin-top: 7px; 230 } 231 232 .line-normal-msg { 233 height: 28px; 234 line-height: 28px; 235 overflow: hidden; 236 text-overflow: ellipsis; 237 color: #4e4e4e; 238 margin-top: 11px; 239 } 240 241 .line-normal-time { 242 height: 28px; 243 line-height: 28px; 244 color: #999; 245 margin-top: 11px; 246 } 247 </style> 248 </head> 249 250 <body id="data"> 251 <div class="line-wrapper"> 252 <div class="line-scroll-wrapper"> 253 <div class="line-normal-wrapper"> 254 <div class="line-normal-left-wrapper"> 255 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 256 <div class="line-normal-info-wrapper"> 257 <div class="line-normal-user-name">蜡笔小新</div> 258 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 259 <div class="line-normal-time">1分钟前</div> 260 </div> 261 </div> 262 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 263 </div> 264 <div class="line-btn-delete"><button>删除</button></div> 265 </div> 266 </div> 267 <div class="line-wrapper"> 268 <div class="line-scroll-wrapper"> 269 <div class="line-normal-wrapper"> 270 <div class="line-normal-left-wrapper"> 271 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 272 <div class="line-normal-info-wrapper"> 273 <div class="line-normal-user-name">乔巴</div> 274 <div class="line-normal-msg">你看不到我哦</div> 275 <div class="line-normal-time">1分钟前</div> 276 </div> 277 </div> 278 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 279 </div> 280 <div class="line-btn-delete"><button>删除</button></div> 281 </div> 282 </div> 283 <div class="line-wrapper"> 284 <div class="line-scroll-wrapper"> 285 <div class="line-normal-wrapper"> 286 <div class="line-normal-left-wrapper"> 287 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 288 <div class="line-normal-info-wrapper"> 289 <div class="line-normal-user-name">贱行贱远</div> 290 <div class="line-normal-msg">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div> 291 <div class="line-normal-time">1分钟前</div> 292 </div> 293 </div> 294 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 295 </div> 296 <div class="line-btn-delete"><button>删除</button></div> 297 </div> 298 </div> 299 <div class="line-wrapper"> 300 <div class="line-scroll-wrapper"> 301 <div class="line-normal-wrapper"> 302 <div class="line-normal-left-wrapper"> 303 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 304 <div class="line-normal-info-wrapper"> 305 <div class="line-normal-user-name">小黄人</div> 306 <div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div> 307 <div class="line-normal-time">1分钟前</div> 308 </div> 309 </div> 310 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 311 </div> 312 <div class="line-btn-delete"><button>删除</button></div> 313 </div> 314 </div> 315 <div class="line-wrapper"> 316 <div class="line-scroll-wrapper"> 317 <div class="line-normal-wrapper"> 318 <div class="line-normal-left-wrapper"> 319 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 320 <div class="line-normal-info-wrapper"> 321 <div class="line-normal-user-name">蜡笔小新</div> 322 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 323 <div class="line-normal-time">1分钟前</div> 324 </div> 325 </div> 326 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 327 </div> 328 <div class="line-btn-delete"><button>删除</button></div> 329 </div> 330 </div> 331 <div class="line-wrapper"> 332 <div class="line-scroll-wrapper"> 333 <div class="line-normal-wrapper"> 334 <div class="line-normal-left-wrapper"> 335 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 336 <div class="line-normal-info-wrapper"> 337 <div class="line-normal-user-name">蜡笔小新</div> 338 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 339 <div class="line-normal-time">1分钟前</div> 340 </div> 341 </div> 342 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 343 </div> 344 <div class="line-btn-delete"><button>删除</button></div> 345 </div> 346 </div> 347 <div class="line-wrapper"> 348 <div class="line-scroll-wrapper"> 349 <div class="line-normal-wrapper"> 350 <div class="line-normal-left-wrapper"> 351 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 352 <div class="line-normal-info-wrapper"> 353 <div class="line-normal-user-name">蜡笔小新</div> 354 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 355 <div class="line-normal-time">1分钟前</div> 356 </div> 357 </div> 358 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 359 </div> 360 <div class="line-btn-delete"><button>删除</button></div> 361 </div> 362 </div> 363 <div class="line-wrapper"> 364 <div class="line-scroll-wrapper"> 365 <div class="line-normal-wrapper"> 366 <div class="line-normal-left-wrapper"> 367 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 368 <div class="line-normal-info-wrapper"> 369 <div class="line-normal-user-name">蜡笔小新</div> 370 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 371 <div class="line-normal-time">1分钟前</div> 372 </div> 373 </div> 374 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 375 </div> 376 <div class="line-btn-delete"><button>删除</button></div> 377 </div> 378 </div> 379 <div class="line-wrapper"> 380 <div class="line-scroll-wrapper"> 381 <div class="line-normal-wrapper"> 382 <div class="line-normal-left-wrapper"> 383 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 384 <div class="line-normal-info-wrapper"> 385 <div class="line-normal-user-name">蜡笔小新</div> 386 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 387 <div class="line-normal-time">1分钟前</div> 388 </div> 389 </div> 390 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 391 </div> 392 <div class="line-btn-delete"><button>删除</button></div> 393 </div> 394 </div> 395 <div class="line-wrapper"> 396 <div class="line-scroll-wrapper"> 397 <div class="line-normal-wrapper"> 398 <div class="line-normal-left-wrapper"> 399 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 400 <div class="line-normal-info-wrapper"> 401 <div class="line-normal-user-name">蜡笔小新</div> 402 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 403 <div class="line-normal-time">1分钟前</div> 404 </div> 405 </div> 406 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 407 </div> 408 <div class="line-btn-delete"><button>删除</button></div> 409 </div> 410 </div> 411 <div class="line-wrapper"> 412 <div class="line-scroll-wrapper"> 413 <div class="line-normal-wrapper"> 414 <div class="line-normal-left-wrapper"> 415 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 416 <div class="line-normal-info-wrapper"> 417 <div class="line-normal-user-name">蜡笔小新</div> 418 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 419 <div class="line-normal-time">1分钟前</div> 420 </div> 421 </div> 422 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 423 </div> 424 <div class="line-btn-delete"><button>删除</button></div> 425 </div> 426 </div> 427 <div class="line-wrapper"> 428 <div class="line-scroll-wrapper"> 429 <div class="line-normal-wrapper"> 430 <div class="line-normal-left-wrapper"> 431 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 432 <div class="line-normal-info-wrapper"> 433 <div class="line-normal-user-name">蜡笔小新</div> 434 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 435 <div class="line-normal-time">1分钟前</div> 436 </div> 437 </div> 438 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 439 </div> 440 <div class="line-btn-delete"><button>删除</button></div> 441 </div> 442 </div> 443 <div class="line-wrapper"> 444 <div class="line-scroll-wrapper"> 445 <div class="line-normal-wrapper"> 446 <div class="line-normal-left-wrapper"> 447 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 448 <div class="line-normal-info-wrapper"> 449 <div class="line-normal-user-name">蜡笔小新</div> 450 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 451 <div class="line-normal-time">1分钟前</div> 452 </div> 453 </div> 454 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 455 </div> 456 <div class="line-btn-delete"><button>删除</button></div> 457 </div> 458 </div> 459 <div class="line-wrapper"> 460 <div class="line-scroll-wrapper"> 461 <div class="line-normal-wrapper"> 462 <div class="line-normal-left-wrapper"> 463 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 464 <div class="line-normal-info-wrapper"> 465 <div class="line-normal-user-name">蜡笔小新</div> 466 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 467 <div class="line-normal-time">1分钟前</div> 468 </div> 469 </div> 470 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 471 </div> 472 <div class="line-btn-delete"><button>删除</button></div> 473 </div> 474 </div> 475 <div class="line-wrapper"> 476 <div class="line-scroll-wrapper"> 477 <div class="line-normal-wrapper"> 478 <div class="line-normal-left-wrapper"> 479 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 480 <div class="line-normal-info-wrapper"> 481 <div class="line-normal-user-name">蜡笔小新</div> 482 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 483 <div class="line-normal-time">1分钟前</div> 484 </div> 485 </div> 486 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 487 </div> 488 <div class="line-btn-delete"><button>删除</button></div> 489 </div> 490 </div> 491 <div class="line-wrapper"> 492 <div class="line-scroll-wrapper"> 493 <div class="line-normal-wrapper"> 494 <div class="line-normal-left-wrapper"> 495 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 496 <div class="line-normal-info-wrapper"> 497 <div class="line-normal-user-name">蜡笔小新</div> 498 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 499 <div class="line-normal-time">1分钟前</div> 500 </div> 501 </div> 502 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 503 </div> 504 <div class="line-btn-delete"><button>删除</button></div> 505 </div> 506 </div> 507 <div class="line-wrapper"> 508 <div class="line-scroll-wrapper"> 509 <div class="line-normal-wrapper"> 510 <div class="line-normal-left-wrapper"> 511 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 512 <div class="line-normal-info-wrapper"> 513 <div class="line-normal-user-name">蜡笔小新</div> 514 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 515 <div class="line-normal-time">1分钟前</div> 516 </div> 517 </div> 518 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 519 </div> 520 <div class="line-btn-delete"><button>删除</button></div> 521 </div> 522 </div> 523 <div class="line-wrapper"> 524 <div class="line-scroll-wrapper"> 525 <div class="line-normal-wrapper"> 526 <div class="line-normal-left-wrapper"> 527 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 528 <div class="line-normal-info-wrapper"> 529 <div class="line-normal-user-name">蜡笔小新</div> 530 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 531 <div class="line-normal-time">1分钟前</div> 532 </div> 533 </div> 534 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 535 </div> 536 <div class="line-btn-delete"><button>删除</button></div> 537 </div> 538 </div> 539 <div class="line-wrapper"> 540 <div class="line-scroll-wrapper"> 541 <div class="line-normal-wrapper"> 542 <div class="line-normal-left-wrapper"> 543 <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 544 <div class="line-normal-info-wrapper"> 545 <div class="line-normal-user-name">蜡笔小新</div> 546 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 547 <div class="line-normal-time">1分钟前</div> 548 </div> 549 </div> 550 <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div> 551 </div> 552 <div class="line-btn-delete"><button>删除</button></div> 553 </div> 554 </div> 555 556 </body> 557 558 </html>
