html5加js实现左滑删除功能
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.12.4.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(e) { 10 // 设定每一行的宽度=屏幕宽度+按钮宽度 11 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width()*2); 12 // 设定常规信息区域宽度=屏幕宽度 13 $(".line-normal-wrapper").width($(".line-wrapper").width()); 14 // 设定文字部分宽度（为了实现文字过长时在末尾显示...） 15 $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280); 16 17 // 获取所有行，对每一行设置监听 18 var lines = $(".line-normal-wrapper"); 19 var len = lines.length; 20 var lastX, lastXForMobile; 21 22 // 用于记录被按下的对象 23 var pressedObj; // 当前左滑的对象 24 var lastLeftObj; // 上一个左滑的对象 25 26 // 用于记录按下的点 27 var start; 28 29 // 网页在移动端运行时的监听 30 for(var i = 0; i < len; ++i) { 31 lines[i].addEventListener('touchstart', function(e) { 32 lastXForMobile = e.changedTouches[0].pageX; 33 pressedObj = this; // 记录被按下的对象 34 35 // 记录开始按下时的点 36 var touches = event.touches[0]; 37 start = { 38 x: touches.pageX, // 横坐标 39 y: touches.pageY // 纵坐标 40 }; 41 }); 42 43 lines[i].addEventListener('touchmove', function(e) { 44 // 计算划动过程中x和y的变化量 45 var touches = event.touches[0]; 46 delta = { 47 x: touches.pageX - start.x, 48 y: touches.pageY - start.y 49 }; 50 51 // 横向位移大于纵向位移，阻止纵向滚动 52 if(Math.abs(delta.x) > Math.abs(delta.y)) { 53 event.preventDefault(); 54 } 55 }); 56 57 lines[i].addEventListener('touchend', function(e) { 58 if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 59 $(lastLeftObj).animate({ 60 marginLeft: "0" 61 }, 500); // 右滑 62 lastLeftObj = null; // 清空上一个左滑的对象 63 } 64 var diffX = e.changedTouches[0].pageX - lastXForMobile; 65 if(diffX < -150) { 66 $(pressedObj).animate({ 67 marginLeft: "-264px" 68 }, 500); // 左滑 69 $(".line-btn-delete").on("click",function(){ 70 $(pressedObj).parent().parent().remove(); 71 }) 72 73 lastLeftObj && lastLeftObj != pressedObj && 74 $(lastLeftObj).animate({ 75 marginLeft: "0" 76 }, 500); // 已经左滑状态的按钮右滑 77 lastLeftObj = pressedObj; // 记录上一个左滑的对象 78 } else if(diffX > 150) { 79 if(pressedObj == lastLeftObj) { 80 $(pressedObj).animate({ 81 marginLeft: "0" 82 }, 500); // 右滑 83 lastLeftObj = null; // 清空上一个左滑的对象 84 } 85 } 86 }); 87 } 88 89 // 网页在PC浏览器中运行时的监听 90 for(var i = 0; i < len; ++i) { 91 $(lines[i]).bind('mousedown', function(e) { 92 lastX = e.clientX; 93 pressedObj = this; // 记录被按下的对象 94 }); 95 96 $(lines[i]).bind('mouseup', function(e) { 97 if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置 98 $(lastLeftObj).animate({ 99 marginLeft: "0" 100 }, 500); // 右滑 101 lastLeftObj = null; // 清空上一个左滑的对象 102 } 103 var diffX = e.clientX - lastX; 104 if(diffX < -150) { 105 $(pressedObj).animate({ 106 marginLeft: "-132px" 107 }, 500); // 左滑 108 lastLeftObj && lastLeftObj != pressedObj && 109 $(lastLeftObj).animate({ 110 marginLeft: "0" 111 }, 500); // 已经左滑状态的按钮右滑 112 lastLeftObj = pressedObj; // 记录上一个左滑的对象 113 } else if(diffX > 150) { 114 if(pressedObj == lastLeftObj) { 115 $(pressedObj).animate({ 116 marginLeft: "0" 117 }, 500); // 右滑 118 lastLeftObj = null; // 清空上一个左滑的对象 119 } 120 } 121 }); 122 } 123 }); 124 </script> 125 <style type="text/css"> 126 * { 127 margin: 0; 128 padding: 0; 129 } 130 131 .line-wrapper { 132 width: 100%; 133 /*height: 40%;*/ 134 overflow: hidden; 135 font-size: 28px; 136 border-bottom: 1px solid #aaa; 137 } 138 139 .line-scroll-wrapper { 140 white-space: nowrap; 141 height: 100%; 142 clear: both; 143 border: 1px solid red; 144 } 145 146 .line-btn-delete { 147 float: left; 148 width: 132px; 149 height: 144px; 150 } 151 .line-btn-cancle { 152 float: left; 153 width: 132px; 154 height: 144px; 155 } 156 .line-btn-cancle button{ 157 width: 100%; 158 height: 100%; 159 background: gray; 160 border: none; 161 font-size: 24px; 162 font-family: 'Microsoft Yahei'; 163 color: #fff; 164 165 } 166 167 168 .line-btn-delete button { 169 width: 100%; 170 height: 100%; 171 background: red; 172 border: none; 173 font-size: 24px; 174 font-family: 'Microsoft Yahei'; 175 color: #fff; 176 } 177 178 .line-normal-wrapper { 179 display: inline-block; 180 line-height: 50px; 181 float: left; 182 padding-top: 10px; 183 padding-bottom: 10px; 184 } 185 186 .line-normal-icon-wrapper { 187 float: right; 188 /*width: 120px;*/ 189 /*height: 50px;*/ 190 margin-right: 15px; 191 margin-top: 15px; 192 border: 1px solid red; 193 /*overflow: hidden;*/ 194 } 195 196 /*.line-normal-icon-wrapper img { 197 width: 120px; 198 height: 120px; 199 }*/ 200 201 .line-normal-left-wrapper { 202 float: left; 203 overflow: hidden; 204 } 205 206 .line-normal-avatar-wrapper { 207 width: 100px; 208 height: 124px; 209 float: left; 210 margin-left: 12px; 211 } 212 .line-normal-avatar-wrapper img { 213 width: 92px; 214 height: 92px; 215 border-radius: 60px; 216 } 217 218 .line-normal-info-wrapper { 219 float: left; 220 margin-left: 10px; 221 margin-top: 7px; 222 } 223 224 .line-normal-user-name { 225 height: 28px; 226 line-height: 28px; 227 color: #4e4e4e; 228 margin-top: 10px; 229 } 230 231 .line-normal-msg { 232 height: 28px; 233 line-height: 28px; 234 overflow: hidden; 235 text-overflow: ellipsis; 236 color: #4e4e4e; 237 margin-top: 25px; 238 } 239 240 /*.line-normal-time { 241 height: 28px; 242 line-height: 28px; 243 color: #999; 244 margin-top: 11px; 245 }*/ 246 </style> 247 </head> 248 249 <body> 250 <div class="line-wrapper"> 251 <div class="line-scroll-wrapper"> 252 <div class="line-normal-wrapper"> 253 <div class="line-normal-left-wrapper"> 254 <div class="line-normal-avatar-wrapper"><img src="img/baby_b2.jpg" /></div> 255 <div class="line-normal-info-wrapper"> 256 <div class="line-normal-user-name">蜡笔小新</div> 257 <div class="line-normal-msg">在同行的小伙伴中提到了你</div> 258 </div> 259 </div> 260 <div class="line-normal-icon-wrapper">1分钟前</div> 261 </div> 262 <div class="line-btn-cancle"><button>取消</button></div> 263 <div class="line-btn-delete"><button>删除</button></div> 264 </div> 265 </div> 266 <div class="line-wrapper"> 267 <div class="line-scroll-wrapper"> 268 <div class="line-normal-wrapper"> 269 <div class="line-normal-left-wrapper"> 270 <div class="line-normal-avatar-wrapper"><img src="img/baby_b2.jpg" /></div> 271 <div class="line-normal-info-wrapper"> 272 <div class="line-normal-user-name">乔巴</div> 273 <div class="line-normal-msg">你看不到我哦</div> 274 <!--<div class="line-normal-time">1分钟前</div>--> 275 </div> 276 </div> 277 <!--<div class="line-normal-icon-wrapper"><img src="img/baby_b2.jpg" /></div>--> 278 </div> 279 <div class="line-btn-cancle"><button>取消</button></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="img/baby_b2.jpg" /></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="img/baby_b2.jpg" /></div>--> 295 </div> 296 <div class="line-btn-cancle"><button>取消</button></div> 297 <div class="line-btn-delete"><button>删除</button></div> 298 </div> 299 </div> 300 <div class="line-wrapper"> 301 <div class="line-scroll-wrapper"> 302 <div class="line-normal-wrapper"> 303 <div class="line-normal-left-wrapper"> 304 <div class="line-normal-avatar-wrapper"><img src="img/baby_b2.jpg" /></div> 305 <div class="line-normal-info-wrapper"> 306 <div class="line-normal-user-name">小黄人</div> 307 <div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div> 308 <!--<div class="line-normal-time">1分钟前</div>--> 309 </div> 310 </div> 311 <!--<div class="line-normal-icon-wrapper"><img src="img/baby_b2.jpg" /></div>--> 312 </div> 313 <div class="line-btn-cancle"><button>取消</button></div> 314 <div class="line-btn-delete"><button>删除</button></div> 315 </div> 316 </div> 317 </body> 318 319 </html>
天下无难事，只要肯攀登！见多识广是多么重要！
