html5加js实现左滑删除功能

时间:2022-09-17 06:27:21
  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>