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

原理：删除的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+"/";
%>



	
	
	
	
	
	
	
	
	
	
	
		*{
			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}
	





	
		
		小纸条
	
	
		
		
			
		

			 

				
				

					
				
				
uu
				删除
			
 
		
	
	
	


	

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