类似于QQ的右滑删除效果的实现方法
原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/functions"prefix="fn"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<basehref="<%=basePath%>">
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no"/>
<title>小纸条</title>
<scriptsrc="assets/wap/kuaiqin/js/jquery-2.1.1.min.js"type="text/javascript"></script>
<scriptsrc="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:1pxsolid#e6e6e6;
}
ulli{
list-style-type:none;
width:100%;
height:60px;
position:relative;
border-bottom:1pxsolid#e6e6e6;
}
div#header{
width:100%;
height:45px;
text-align:center;
line-height:45px;
border-bottom:1pxsolid#e6e6e6;
margin-bottom:10px;
}
lip{
height:30px;
margin-left:75px;
}
.right{float:right;}
.time{margin-right:24px;display:none;border-radius:50%;width:15px;height:15px;background-color:red;margin-top:20px;font-size:13px;text-align:center;line-height:15px;color:white;}
.img-box{
width:40px;height:40px;margin:10px0px10px24px;position:absolute;
}
.blank{width:100%;height:15px;}
.delfriend{height:60px;width:70px;background-color:red;display:block;position:absolute;top:0px;right:-70px;line-height:60px;color:#ffffff;text-align:center;z-index:13}
</style>
</head>
<body>
<script>
varw=$(window).width()+"px";
varh=$(window).height()+"px";
$("body").css({"width":w,"height":h});
</script>
<divid="header">
<imgsrc="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';returnfalse">
小纸条
</div>
<divid="list">
<divclass="blank"></div>
<ulid="myf">
<liclass="myfriend"data-friendid=""id="del">
<imgsrc=""class="img-box">
<pstyle="line-height:40px;">
<spanclass="righttime"id=""></span>
</p>
<pstyle="line-height:20px;"id="">uu</p>
<spanclass="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);
}elseif(start-end>0){//向右滑动,删除好友
$(".myfriend").not("#del_"+friendid).animate({"margin-left":"0px"},1000);
$("#del_"+friendid).animate({"margin-left":"-70px"},1000);
}else{
varcls=$(e.target).attr("data-cls");
console.log(cls);
varff=$(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>
以上就是小编为大家带来的类似于QQ的右滑删除效果的实现方法全部内容了，希望大家多多支持毛票票~