请用chrome手机模式查看或者在手机上查看（转载请注明出处）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Touch滑动</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="author" contect="Wt, wt9213@163.com" /> <style type="text/css"> body{ margin: 0; padding: 0; background-color:#e3e3e3; } .list{ margin: 0 auto; max-width: 720px; } .item{ position: relative; height: 50px; border-bottom:1px solid #e3e3e3; } .touchitem{ position: absolute; width: 100%; height: 100%; line-height: 50px; font-size: 18px; z-index: 99; background-color: #fff; } .touchitem span{ padding-left: 20px; } .delete{ position: absolute; top: 0; right: 0; height: 100%; width: 20%; line-height: 50px; text-align: center; background-color:#DE2222; color: #fff; z-index: 0; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> <!-- 手机端使用zepto.js --> </head> <body> <div class="list"> <div class="item"> <div class="touchitem"><span>滑动删除</span></div> <div class="delete">删除</div> </div> <div class="item"> <div class="touchitem"><span>滑动删除</span></div> <div class="delete">删除</div> </div> <div class="item"> <div class="touchitem"><span>滑动删除</span></div> <div class="delete">删除</div> </div> </div> <script> $(function() { $(".touchitem").on('touchstart', function(e) { var touch = e.targetTouches[0]; sessionStorage.setItem("touchstartX", touch.pageX); //存储touch到的起始x坐标 }); $(".touchitem").on('touchmove', function(e) { var touch = e.targetTouches[0]; var x = touch.pageX; //move的坐标的起始的坐标判断，得出方向 if (x + 15 < sessionStorage.touchstartX) { //左 $(this).css({ "transform": "translate(-20%)" }); } else if (x - 15 > sessionStorage.touchstartX) { //右 $(this).css({ "transform": "translate(0)" }); } }); }); </script> </body> </html>