类似于QQ的右滑删除效果的实现方法
Posted SnowLover
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了类似于QQ的右滑删除效果的实现方法相关的知识，希望对你有一定的参考价值。
类似于QQ的右滑删除效果的实现方法
原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="en"><head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" /> <title>小纸条</title> <script src="assets/wap/kuaiqin/js/jl.js" type="text/javascript"></script> <style> *{ margin:0px; padding: 0px; font-size: 14px; box-sizing: border-box; }body{overflow: hidden;width:100%;height:100%;} #list{ border-top:1px solid #e6e6e6; } ul li{ list-style-type: none; width: 100%; height:60px; position: relative; border-bottom:1px solid #e6e6e6; } div#header{ width: 100%; height:45px; text-align: center; line-height: 45px; border-bottom:1px solid #e6e6e6; margin-bottom: 10px; } li p{ height:30px; margin-left: 75px; } .right{float: right;} .time{margin-right: 24px;display:none;border-radius:50%;width:15px;height:15px;margin-top:20px;font-size:13px;text-align:center;line-height:15px;color:white;} .img-box{ width:40px;height:40px;margin:10px 0px 10px 24px;position:absolute; } .blank{width:100%;height:15px;} .delfriend{height:60px;width:70px;display:block;position:absolute;top:0px;right:-70px;line-height:60px;color:#ffffff;text-align:center;z-index:13} </style></head><body><script> var w=$(window).width()+"px"; var h=$(window).height()+"px"; $("body").css({"width":w,"height":h});</script> <div id="header"> <img src="assets/wap/kuaiqin/img/return.png" style="position:absolute;top:5px;left:5px;z-index:100;width:10px;height:18px;margin-top:5px;" onclick="window.location.href= ‘wap/kuaiqin/index‘;return false"> 小纸条 </div> <div id="list"> <div class="blank"></div> <ul id="myf"> <li class="myfriend" data-friendid="" id="del"> <img src="" class="img-box"> <p style="line-height: 40px;"> <span class="right time" id=""></span> </p> <p style="line-height: 20px;" id="">uu</p> <span class="delfriend" >删除</span> </li> </ul> </div> <script> $("#myf").unbind().on("touchstart",".myfriend",function (e) { e.preventDefault(); var _a= e.originalEvent.targetTouches[0]; start=_a.pageX; friendid=$(this).attr("data-friendid"); }).on("touchend",".myfriend", function (e) { e.preventDefault(); var _a= e.originalEvent.changedTouches[0]; end=_a.pageX; if(start-end<0){ $("#del_"+friendid).animate({"margin-left":"0px"},1000); }else if(start-end>0){//向右滑动,删除好友 $(".myfriend").not("#del_"+friendid).animate({"margin-left":"0px"},1000); $("#del_"+friendid).animate({"margin-left":"-70px"},1000); }else{ var cls=$(e.target).attr("data-cls"); console.log(cls); var ff=$(e.target).attr("data-friendid"); if(cls=="delfriend")delfriend(ff); else{ window.location="wap/kuaiqin/sr_index?smallmy="+localStorage.tokenforkuaiqin+"&friendid="+friendid; } } }); </script></body></html> |
（转载） http://www.jb51.net/article/94855.htm
以上是关于类似于QQ的右滑删除效果的实现方法的主要内容，如果未能解决你的问题，请参考以下文章
swift 关于FDFullscreenPopGesture的右滑返回
使用ExpandableListView做一个类似QQ列表效果图