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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索QQ右滑删除
javascript技巧、javascript实现计算器、javascript底层实现、javascript实现分页、javascript实现ajax,以便于您获取更多的相关知识。

时间: 2024-11-13 06:45:40

类似于QQ的右滑删除效果的实现方法_javascript技巧的相关文章

JavaScript排序算法动画演示效果的实现方法_javascript技巧

之前在知乎看到有人在问 自己写了一个冒泡排序算法如何用HTML,CSS,JavaScript展现出来排序过程.   感觉这个问题还挺有意思 .前些时间就来写了一个.这里记录一下实现过程. 基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来. 问题一:如何将JavaScript排序的一步步进程展现出来? 我试过的几种思路: 1.让JavaScript暂停下来,慢下来. JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来. 排序的每一个循环都让它停

js实现对table动态添加、删除和更新的方法_javascript技巧

本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

JS实现添加,替换,删除节点元素的方法_javascript技巧

本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

JavaScript按值删除数组元素的方法_javascript技巧

本文实例讲述了JavaScript按值删除数组元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function ArrayRemoveByValue(str_value,arr_remove){     var num_to_del =new  RegExp(str_value);     var db_d =new  RegExp('\,{2}');     var se_d =new  RegExp('(^\,)|(\,$)');     arr_ret = ar

Javascript removeChild()删除节点及删除子节点的方法_javascript技巧

下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法:     parent.removeChild(thisNode) 参数说明:   参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo&qu

JavaScript+CSS无限极分类效果完整实现方法_javascript技巧

本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd

javascript弹性运动效果简单实现方法_javascript技巧

本文实例讲述了javascript弹性运动效果简单实现方法.分享给大家供大家参考,具体如下: 弹性运动实现原理:加速运动+减速运动+摩擦运动 运行效果截图如下: 实例代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px

javascript动态添加删除tabs标签的方法_javascript技巧

本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?