类似于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的右滑删除效果的实现方法全部内容了,希望大家多多支持毛票票~