类似于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
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
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/jquery-2.1.1.min.js" type="text/javascript"></script>
    <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的右滑返回

JS时间轴效果(类似于qq空间时间轴效果)

Android 左滑or右滑抽屉菜单

使用ExpandableListView做一个类似QQ列表效果图

使用 electron 实现类似新版 QQ 的登录界面效果(阴影背景动画窗体3D翻转)

iOS tableView右滑显示选择