类似于QQ的右滑删除效果的实现方法

2019-11-20 08:44:29

字体：大中小

来源：转载

供稿：网友

原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div

<%@ 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;background-color:red;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;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>	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>

以上就是小编为大家带来的类似于QQ的右滑删除效果的实现方法全部内容了，希望大家多多支持武林网~

上一篇：移动端滑动插件Swipe教程

下一篇：js实现点击图片自动提交action的简单方法