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


Posted in Javascript onOctober 16, 2016

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

Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 #Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 #Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 #Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
You might like
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
js 通用订单代码
2013/12/23 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
python2 对excel表格操作完整示例
2020/02/23 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
几个数据库方面的面试题
2016/07/01 面试题
简历中个人自我评价范文
2013/12/26 职场文书
美术专业自荐信
2014/07/07 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
《月光曲》教学反思
2016/02/16 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸