类似于QQ的右滑删除效果

最新推荐文章于 2024-05-30 15:52:02 发布

qq_1913284695

最新推荐文章于 2024-05-30 15:52:02 发布

阅读量803

点赞数

分类专栏： js总结

本文链接：https://blog.csdn.net/qq_21119773/article/details/52336878

版权

js总结专栏收录该内容

40 篇文章 0 订阅

订阅专栏

原理：删除的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;" οnclick="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_1913284695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似于QQ的右滑删除效果

原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> ">
复制链接

扫一扫

专栏目录